微信小程序——编辑

记录一下

微信小程序分页编辑，可增页删除当前页面。第一页为主图片和主句子。其他页面一致。

左滑右滑可切换页面。每页可增加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>