微信小程序——编辑
记录一下
微信小程序分页编辑，可增页删除当前页面。第一页为主图片和主句子。其他页面一致。
左滑右滑可切换页面。每页可增加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) { //保存即时编辑的quote var text = e.detail.value var content = this.data.content var quote = content[0].quote quote.q = text content[0].quote = quote if(text){ this.setData({ length: text.length }) }else{ this.setData({ length: 0 }) } this.setData({ content: content, }) }, choosequoteimg: function () { var _this = this; var quote = _this.data.quote wx.chooseImage({ count: 1, sizeType: [\'original\', \'compressed\'], sourceType: [\'album\', \'camera\'], success: function (res) { var imgsrc = res.tempFilePaths; var content = _this.data.content var quote = content[0].quote quote.img=imgsrc content[0].quote = quote _this.setData({ content: content }) } }) }, add: function() { //加页,保存页面内容在编写时即时完成 var content = this.data.content var current = this.data.current var 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 = this wx.showModal({ title: \'提示\', content: \'是否删除当前页？\', success: function(res) { if (res.confirm) { console.log(\'用户点击确定\') //删除当前页 var current = _this.data.current var content = _this.data.content content.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 % 10 if (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 + \' \' + Y return d }, text1: function (e) { var current=this.data.current var content=this.data.content var c=content[current] c.contentup=e.detail.value content[current]=c this.setData({ content:content }) }, text2: function (e) { var current = this.data.current; var text = e.detail.value var content = this.data.content content[current].contentdown = text this.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//获取当前content var current = _this.data.current//当前下标 var c = content[current]//继承原有内容 c.img = tempFilePaths content[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.content content[current].heightup = (line + 1) * 70 this.setData({ content: content }) }, line0: function (e) { var current = this.data.current; var line = e.detail.lineCount; var content = this.data.content content[current].heightdown = (line + 1) * 70 this.setData({ content: content }) }, lose: function () { var current = this.data.current; var heightup = this.data.content[current].heightup this.data.content[current].heightup = heightup - 70 this.setData({ content: this.data.content }) }, lose0: function () { var current = this.data.current; var heightdown = this.data.content[current].heightdown this.data.content[current].heightdown = heightdown - 70 this.setData({ content: this.data.content }) }, onLoad: function(options) { var d = this.getdate() //页面日期获取 var content = this.data.content var quote = content[0].quote quote.date = d content[0].quote = quote this.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>
请发表评论