记录一下
微信小程序分页编辑，可增页删除当前页面。第一页为主图片和主句子。其他页面一致。
左滑右滑可切换页面。每页可增加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>