记录一下

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

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

微信小程序——编辑的更多相关文章

  1. 转载:第四弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿,每日更新!

    感谢大家支持!博卡君周末休息了两天,今天又回到战斗状态了.上周五晚上微信放出官方工具和教程了,推荐程序猿小伙伴们都去试一试,结合教程和代码,写写自己的 demo 也不错. 闲话不多说,开始更新! 第七 ...

  2. 微信小程序实例教程(三)

    第七章:微信小程序编辑名片页面开发   编辑名片有两条路径,分为新增名片流程与修改名片流程. 用户手填新增名片流程:   首先跳转到我们的新增名片页面 1 需要传递用户的当前 userId,wx.na ...

  3. 微信小程序实例教程(二)

    第五章:微信小程序名片夹详情页开发 今天加了新干货!除了开发日志本身,还回答了一些朋友的问题. 闲话不多说,先看下「名片盒」详情页的效果图: 备注下大致需求:顶部背后是轮播图,二维码按钮弹出模态框信息 ...

  4. 微信小程序部署问题总结

    1.微信小程序免费SSL证书Https 申请(阿里云申请) 进入阿里云控制台后,选择CA证书服务 选择购买证书 但是阿里云的免费SSL证书藏得比较深,得这样操作才能显示出免费证书 点击Symantec ...

  5. 微信小程序入门到实战(1)-基础知识

    1.微信小程序介绍 微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用. 1.1. 为什么是微信 ...

  6. 微信小程序--canvas画布实现图片的编辑

    技术:微信小程序   概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...

  7. 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app

    微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...

  8. 微信小程序开发初探

    一.关于微信小程序 1.1 小程序诞生的背景 张小龙说道: (1)一切以用户价值为依归→用户是微信的核心,所以微信中没有很多与客户无关的功能,比如QQ中的乱七八糟一系列东西. (2)让创造发挥价值→所 ...

  9. 微信小程序开发工具测评

    1月9日微信小程序正式上线.很多企业都希望能在这个.但是在技术开发的问题上,却不知道该如何下手.经过一些程序员不辞辛苦连夜测试,终于从十余款工具呕心沥血筛选出四款比较靠谱实用的微信小程序开发工具.接下 ...

随机推荐

  1. PAT 甲级 1035 Password (20 分)

    1035 Password (20 分) To prepare for PAT, the judge sometimes has to generate random passwords for th ...

  2. ActiveMQ( 一) 同步,异步,阻塞 JMS 消息模型

    同步请求:浏览器 向服务器 发送一个登录请求,如果服务器 没有及时响应,则浏览器则会一直等待状态,直至服务器响应或者超时. 异步请求:浏览器 向服务器 发送一个登录请求,不管服务器是否立即响应,浏览器 ...

  3. php变量函数

    这个东西相当于C语言中的函数指针,C#里的委托   function come() {                   //定义com函数 echo "来了<p>" ...

  4. 关于mysql文件导入提示“Variable @OLD_CHARACTER_SET_CLIENT can't be set to the value of @@CHARACTER_SET_CLIENT”问题分析

    今天用myssqldump导出数据,然后再导入另外mysql数据库时,提示Variable @OLD_CHARACTER_SET_CLIENT can't be set to the value of ...

  5. java——collection总结

    Collection 来源于Java.util包,是非常实用常用的数据结构!!!!!字面意思就是容器.具体的继承实现关系如下图,先整体有个印象,再依次介绍各个部分的方法,注意事项,以及应用场景.   ...

  6. leetCode191. 位1的个数

    编写一个函数,输入是一个无符号整数,返回其二进制表达式中数字位数为 ‘1’ 的个数(也被称为汉明重量) 示例 1: 输入:00000000000000000000000000001011 输出:3 解 ...

  7. 【HDFS API编程】jUnit封装-改写创建文件夹

    首先:什么是jUnit  回顾: https://www.cnblogs.com/Liuyt-61/p/10374732.html 上一节我们知道: /** * 使用Java API操作HDFS文件系 ...

  8. leetcode每日刷题计划-简单篇day8

    今天是纠结要不要新买手机的一天QAQ想了想还是算了吧,等自己赚钱买,加油 Num 70 爬楼梯 Climbing Stairs class Solution { public: int climbSt ...

  9. Tools:实现vmware虚拟机开机自启动

    [来自同事笔记分享] 背景:很多时候宿主机会因为各种原因导致关机或重启,但是里面配置的各个虚拟机不会随宿主机启动而启动,而是需要人为的再去一个一个的操作,无疑会对工作造成一定的影响 因此,正文来了: ...

  10. 读取tensorflow的checkpoint里保存的参数

    import tensorflow as tf from tensorflow.python import pywrap_tensorflow import os checkpoint_path = ...