记录一下
微信小程序分页编辑，可增页删除当前页面。第一页为主图片和主句子。其他页面一致。
左滑右滑可切换页面。每页可增加0到1页。小黑点与页面一致。
/* pages/booktool/write/write.wxss */ page{height:100%;width:100%; } #swiper{height:100%;width:100%;display:flex;flex-direction:row; } .bgcontainer{height:100%;display:flex;flex-direction:row;justify-content: center;align-items: center;flex-wrap: nowrap; } .bg{height:90%;width:100vw; } #quote>.image{ height:50%; width:100%; background:rgb(245,245,245); display:flex; flex-direction:column; justify-content: center; align-items: center; } .image>image{height:90%;width:90%; } #quote>.quote{ width:100%; display:flex; flex-direction:column; justify-content: center; align-items: center; } .quote>textarea{height:420rpx;width:80%;padding:20rpx;color:rgb(66,66,66);font-size:33rpx;line-height:70rpx;position:relative; } .count{height:30rpx;width:100rpx;position:absolute;bottom:0rpx;right:0rpx;line-height:30rpx;font-size:22rpx;text-align:right; } .quote>.editor{width:80%;height:50rpx;text-align:right; } .editor>text{margin-right:30rpx;font-size:25rpx; } .icon{height:65rpx;display:flex;flex-direction: row;justify-content:flex-end;align-items: center; } .icon>image{height:45rpx;width:45rpx;margin-right:20rpx; } .bots>.bot{background:gray;height:15rpx;width:15rpx;border-radius:15rpx;margin-left:8rpx;margin-right:8rpx; } #swiper>.bots{height:4%;width:100%;position:absolute;bottom:0rpx;display:flex;flex-direction:row;justify-content: center;align-items: center; } #write{height:100%;width:100%;position:relative; } #write>.icon{position:absolute;bottom:-28rpx;right:0rpx; } .textarea{padding-top:5%;height:100%;width:90%;margin-left:5%;overflow: hidden; } .textarea1{height:70rpx;width:100%;line-height:70rpx; } .contentimg{height:280rpx;width:100%;border-radius: 20rpx;margin:0rpx; } .textarea2{height:70rpx;width:100%;line-height:70rpx; }
js页面，保存编辑数据
var util = require('../../../utils/util.js'); // pages/booktool/write/write.js Page({data: {maxlength: 275,length: 0,content: [{quote: {img: '',q: "",date: '',u: '胡图图'} //quote页面 }],bgleft: 0,current: 0,},savequote: function(e) { //保存即时编辑的quotevar text = e.detail.valuevar content = this.data.contentvar quote = content[0].quotequote.q = textcontent[0].quote = quoteif(text){this.setData({length: text.length})}else{this.setData({length: 0})}this.setData({content: content,})},choosequoteimg: function () {var _this = this;var quote = _this.data.quotewx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success: function (res) {var imgsrc = res.tempFilePaths;var content = _this.data.contentvar quote = content[0].quotequote.img=imgsrccontent[0].quote = quote_this.setData({content: content})}})},add: function() { //加页,保存页面内容在编写时即时完成var content = this.data.contentvar current = this.data.currentvar c = {heightup: '',contentup: '',img: '',contentdown: '',heightdown: ''}var down = content.slice(this.data.current + 1) //获取后面的var up = content.slice(0, this.data.current + 1)up.push(c)this.setData({current: this.data.current + 1,content: up.concat(down)}) //加页 },sub: function() { //减去当前页var _this = thiswx.showModal({title: '提示',content: '是否删除当前页？',success: function(res) {if (res.confirm) {console.log('用户点击确定') //删除当前页var current = _this.data.currentvar content = _this.data.contentcontent.splice(current,1)_this.setData({current: current - 1,content: content})} else if (res.cancel) {console.log('取消删除当前页')}}})},nosub: function() {wx.showModal({content: '当前页面不可删除',})},drawend: function(res) {var enddata = [res.changedTouches[0].pageX, res.changedTouches[0].pageY]var x = enddata[0] - this.data.startdata[0]if (x * x > 50 * 50) {if (x < 0) { //判定为右滑 if (this.data.current + 1 < this.data.content.length)this.setData({current: this.data.current + 1})} else { //判定为左滑if (this.data.current - 1 >= 0) {this.setData({current: this.data.current - 1})}}}},drawstart: function(res) {this.setData({startdata: [res.changedTouches[0].pageX, res.changedTouches[0].pageY]})},getdate: function() {var time = util.formatTime(new Date());var timestamp = Date.parse(time);var date = new Date(timestamp);var Y = date.getFullYear();//获取月份 var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);//获取当日日期 var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();var type = D % 10if (type == 1) D += 'st'else if (type == 2) D += 'nd'else if (type == 3) D += 'rd'else D += 'th'var mon = ['Jan', 'Feb', 'Mar', 'April', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec']var d = mon[M - 1] + ' ' + D + ' ' + Yreturn d},text1: function (e) {var current=this.data.currentvar content=this.data.contentvar c=content[current]c.contentup=e.detail.valuecontent[current]=cthis.setData({content:content})},text2: function (e) {var current = this.data.current;var text = e.detail.valuevar content = this.data.contentcontent[current].contentdown = textthis.setData({content: content,downlength: text.length})},/*** 生命周期函数--监听页面加载*/addp: function () {var _this = this;wx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success: function (res) {var tempFilePaths = res.tempFilePaths;var content = _this.data.content//获取当前contentvar current = _this.data.current//当前下标var c = content[current]//继承原有内容c.img = tempFilePathscontent[current] = c_this.setData({//更新quote中的img content: content,maxlength: _this.data.maxlength - 110})if (_this.data.content[_this.data.current].contentup.length <= 0) {//上方文字为空_this.data.content[_this.data.current].heightup = 0_this.setData({content: _this.data.content,})}}})},line: function (e) {var current = this.data.current;var line = e.detail.lineCount;var content = this.data.contentcontent[current].heightup = (line + 1) * 70this.setData({content: content})},line0: function (e) {var current = this.data.current;var line = e.detail.lineCount;var content = this.data.contentcontent[current].heightdown = (line + 1) * 70this.setData({content: content})},lose: function () {var current = this.data.current;var heightup = this.data.content[current].heightupthis.data.content[current].heightup = heightup - 70this.setData({content: this.data.content})},lose0: function () {var current = this.data.current;var heightdown = this.data.content[current].heightdownthis.data.content[current].heightdown = heightdown - 70this.setData({content: this.data.content})},onLoad: function(options) {var d = this.getdate() //页面日期获取var content = this.data.contentvar quote = content[0].quotequote.date = dcontent[0].quote = quotethis.setData({content: content})},complete:function(){wx.showActionSheet({itemList: ['立即发布','存为草稿'],success(res) {console.log(res.tapIndex);if (res.tapIndex === 0) {console.log("发布")console.log(this.data.content)}if (res.tapIndex === 1) {console.log(this.data.content)}}})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {},/*** 生命周期函数--监听页面显示*/onShow: function() {},/*** 生命周期函数--监听页面隐藏*/onHide: function() {},/*** 生命周期函数--监听页面卸载*/onUnload: function() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function() {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function() {},/*** 用户点击右上角分享*/onShareAppMessage: function() {} })
wxml代码
<!--pages/booktool/compose/compose.wxml--> <view id="swiper"><block wx:for="{{content}}" wx:key="key" wx:for-item="c" wx:for-index="i"><view class="bgcontainer" style="transform:translateX({{-current*100}}vw);"><block wx:if="{{i==0}}"><view class="bg" id="quote" bindtouchstart="drawstart" bindtouchend="drawend" ><view class="image"><image wx:if="{{c.quote.img}}" bindtap="choosequoteimg" src="{{c.quote.img}}"></image><image wx:else bindtap="choosequoteimg" style="height:100rpx;width:120rpx;" src="img/pic.png"></image></view><view class="quote"><textarea class="input" bindinput="savequote" placeholder="在此编辑......" maxlength='100' value="{{c.quote.q}}"><text class="count">{{length}}/100</text></textarea><view class="editor"><text class="date">{{c.quote.date}}</text><text class="editor">{{c.quote.u}}</text></view></view><view class="icon"><image src="img/save.png" bindtap="complete"></image> <image src="img/sub.png" bindtap="nosub"></image><image src="img/add.png" bindtap="add"></image></view></view></block><block wx:if="{{i!=0}}"><view bindtouchstart="drawstart" bindtouchend="drawend" class="bg"><view id="write"><view class="textarea"> <textarea class="textarea1" wx:if="{{content[i].contentup||!content[i].img}}" style="height:{{content[i].heightup}}rpx;" placeholder="在此编辑......" bindinput="text1" focus="true" bindlinechange="line" auto-height='{{false}}' maxlength="-1" value="{{content[i].img}}" bindblur="lose" value="{{content[i].contentup}}"></textarea><image class="contentimg" bindtap="addp" wx:if="{{content[i].img}}"src="{{content[i].img}}"></image><textarea wx:if="{{content[i].img}}" bindlinechange="line0" style="height:{{content[i].heightdown}}rpx;" placeholder="在此编辑......" bindinput='text2' bindblur="lose0" class="textarea2" maxlength="-1" value="{{content[i].contentdown}}" ></textarea></view><view class="icon"><image src="img/save.png" bindtap="complete"></image><image src="img/addp.png" bindtap="addp"></image> <image src="img/sub.png" bindtap="sub"></image><image src="img/add.png" bindtap="add"></image></view></view></view> </block></view></block><view class="bots"><block wx:for="{{content}}" wx:key="this" wx:for-index="i"><view class="bot" style="background:{{i==current?'rgb(66,66,66)':''}};"></view></block></view></view>