一大早在各科技公众号有看到小程序支持直接分享到朋友圈，这么好的功能，忍不住要实践下。 根据官方文档走起，文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html 然后根据官方文档的意思，目前之支持Android版本，为什么IOS版本总是慢一些呢，(╯▔皿▔)╯ 接下来先上代码（需要注意的是得是最新版的预发布版本才行，下载链接：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html） [图片] [图片] 在需要分享的页面对应的js文件里面写入"onShareTimeline"即可，需要注意的是需要先编写"onShareAppMessage"方法。 [图片] 点击右上角三个点，出来的效果如下图所示 [图片][图片] 再次点击右下角得"查看小程序分享页"就可以看到类似官方文档上的效果，具体如下图所示： [图片][图片] 在Android手机端下载最新版本的小程序示例，也未发现对应的分享朋友圈功能，静候微信团队的更新

1、现在已经在云函数接收到wx.cloud.CDN返回的URL了，如下： http://vweixinf.tc.qq.com/301/20303/stodownload?m=21310b386f8f96354a3934936661dc87&filekey=30350201010421301f0202012d0402535a041021310b386f8f96354a3934936661dc87020300d9c4040d00000004627466730000000131&hy=SZ&storeid=323032303039303831303531323130303031643961373839626234316361626366343566303930303030303132643030303034663466&bizid=1023 2、上传云存储用的API是cloud.uploadFile，入参是：[图片] uploadFile接收的fileContent是Buffer或fs.ReadStream类型 问题：怎样把wx.cloud.CDN的URL变成Buffer或fs.ReadStream类型，即在云函数中怎样把链接里面的数据下载下来并上传到云存储？

[图片][图片]实际里边有六个图片

在js中page之外的方法如何对page中的data里面的常量赋值，就比如以下这个方法，想通过这个方法对data里面的常量赋值 此方法写在page以外 [图片]

📢 大家好，我是小丞同学，一名大二的前端爱好者 📢 这篇文章将介绍小程序的基础内容 📢 非常感谢你的阅读，不对的地方欢迎指正 🙏 📢 愿你忠于自己，热爱生活 前言 本文将从零开始介绍微信小程序基础内容，有助于对微信小程序有个全局了解，对一些配置有更好的理解和实战 一、小程序配置文件 小程序有两种配置文件，全局的[代码]app.json[代码]和页面单独的[代码]page.json[代码] 注意：配置文件中不能出现注释 1.1 全局配置 app.json 官方文档 小程序的全局配置，包括所有页面路径、界面表现、网络超时时间、底部tab。 举个例子 [图片] 这是之前学的项目的配置文件的一部分 各字段的含义 [代码]pages[代码]字段 —— 用于描述当前小程序所用页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录 [代码]window[代码]字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义，导航文字 [代码]tabBar[代码]字段 —— 定义小程序的底部导航栏样式 [代码]tabBar[代码] 配置属性 [图片] 1.2 页面配置 page.json 每一个小程序页面也可以使用 [代码].json[代码] 文件来对本页面的窗口表现进行配置。 可以独立定义每个页面的一些属性，如顶部颜色、下拉刷新等等 注意：如果有与[代码]app.json[代码]文件相同的配置项，页面中的配置项将会覆盖[代码]app.json[代码]中[代码]window[代码]中的配置项 [图片] 1.3 sitemap.json 配置 ⼩程序根⽬录下的 [代码]sitemap.json[代码] ⽂件⽤于配置⼩程序及其⻚⾯是否允许被微信索引。 二、wxml语法 2.1 数据绑定 2.1.1 普通写法 [代码]wxml[代码]文件中的模板语法 [图片] 在同页面下的[代码]js[代码]中传入模板数据 [图片] 2.1.2 组件属性 模板语法 [代码]<view id="item-{{id}}"> </view> [代码] 数据传递 [代码]Page({  data: {    id: 0 } }) [代码] 2.1.3 bool 类型 不能直接写 checked = “false”，该计算结果为字符串 [代码]<checkbox checked="{{false}}"> </checkbox> [代码] 2.2 运算 2.2.1 三元运算 [图片] 2.2.2 算数运算 [图片] [图片] 2.2.3 逻辑判断 采用[代码]wx:if[代码] 来判断是否需要渲染该代码块： [代码]<view wx:if="{{length > 5}}"> </view> [代码] 也可以采用[代码]wx:elif[代码]和[代码]wx:else[代码]来添加一个[代码]else[代码]块 [代码]<view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view> [代码] 注意：如果需要控制多个组件标签，可以使用[代码]block[代码]标签将多个组件包装起来，给[代码]block[代码]加上控制属性 注意： [代码]<block/>[代码] 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性 2.2.4 字符串运算 [代码]<view>{{"hello" + name}}</view> [代码] [代码]//page中的js文件 Page({  data:{    name: 'MINA' } }) [代码] 注意：花括号和引号之间如果有空格，将最终被解析成为字符串 2.3 列表渲染 2.3.1 wx:for 默认数组的当前项的下标变量名默认为 [代码]index[代码]，数组当前项的变量名默认为 [代码]item[代码] [代码]<view wx:for="{{array}}"> {{index}}: {{item.message}} </view> [代码] [代码]array: [{ message: 'foo', }, { message: 'bar' }] [代码] [图片] 由于未设置[代码]wx:key[代码]属性因此会有警告，提示采用[代码]wx:key[代码]来提高性能 [代码]wx:key[代码]绑定的值有几种选择 [代码]string[代码]类型，表示循环项中的唯一属性 保留字[代码]*this[代码]，表示[代码]item[代码]本身，代表唯一的字符串和数组 [图片] 2.4 条件渲染 2.4.1 hidden [代码]<view hidden="{{condition}}"> True </view> [代码] 类似[代码]wx:if[代码]，频繁切换用[代码]hidden[代码]，不常使用[代码]wx:if[代码] 三、事件绑定 通过bind关键字来实现。如 [代码]bindtap[代码] 、[代码]bindinput[代码] 、[代码]bindchange[代码] 等 给[代码]input[代码]绑定输入事件 [代码]<input type="text" bindinput="handleInput"/> [代码] 事件处理函数，将这个数据映射到 data 数据中 [代码]handleInput(e) { this.setData({ num: e.detail.value }) } [代码] 3.1注意事项 绑定事件时不能带参数，不能带括号，以下错误示范 [代码]<input bindinput="handleInput(100)" /> [代码] 事件传值，通过标签自定义属性的方式和[代码]value[代码] [代码]<input bindinput="handleInput" data-item="100" /> [代码] 事件触发时获取数据 [代码]  handleInput: function(e) {    // {item:100}   console.log(e.currentTarget.dataset)    // 输入框的值   console.log(e.detail.value); } [代码] 四、wxss 样式 wxss 扩展特性 响应式长度单位[代码]rpx[代码] 样式导入 4.1 尺寸单位 [代码]rpx[代码]: 可以根据屏幕宽度进⾏⾃适应 使⽤步骤： 确定设计稿宽度 [代码]pageWidth[代码] 计算⽐例 [代码]750rpx = pageWidth px[代码] ,因此 [代码]1px=750rpx/pageWidth[代码] 在 less ⽂件中，只要把设计稿中的 [代码]px => 750/pageWidth rpx[代码] 即可。 4.2 样式导入 使⽤[代码]@import[代码] 语句可以导⼊外联样式表，只⽀持相对路径。 [代码]@import "common.wxss"; .middle-p {  padding:15px; } [代码] 4.3 选择器 不支持通配符选择器[代码]*[代码] 仅支持以下选择器 [图片] 好忙，好忙，好忙~

场景引入 为什么需要用到高性能虚拟列表+节流+分页请求的优化？ 当有场景需求为需要将大量数据(10000条)呈现在一页上，我们不断下拉访问，页面中有大量的数据列表的时候，用户会不会有不好的体验？会不会出现滚动不流畅而卡顿的情况？会不会因卡顿而出现短暂的白屏现象(数据渲染不成功)？ 通过微信开发者工具自带的调试器->Network页面，我们可以观察到当有长列表时如果不使用高性能虚拟列表+节流+分页请求的优化，会出现以下问题： FPS：每秒帧数，图表上的红色块表示长时间帧，很可能会出现卡顿。 CPU：CPU消耗占用，实体图越多消耗越高。 NET：网络请求效率低，一次性请求10000条的渲染效率远远低于分1000次，每次请求10条数据 内存：滑动该列表时明显能看到内存消耗大。 总结：如果需要将大量数据(10000条)呈现在一页上，可以通过高性能虚拟列表+节流+按需请求分页数据并追加显示。 优化的具体实现可拆分为以下需求(将一个大问题拆分为一个个小问题并逐个去解决)： 不把长列表数据一次性全部直接显示在页面上。 截取长列表一部分数据用来填充屏幕容器区域。 长列表数据不可视部分使用使用空白占位填充。 监听滚动事件根据滚动位置动态改变可视列表。 监听滚动事件根据滚动位置动态改变空白填充。 分页从服务器请求数据，将一次性请求所有数据变为滚动到底部才再次向服务器发送获取数据的请求 开始实战 此次实例我设定每个元素的固定高度为210rpx [图片] （1）首先计算屏幕内的容积最大容量(即屏幕一次性可以容纳多少个高度为210rpx的元素) 调用wx.createSelectorQuery()的api [图片] 上图是id为scrollContainer的组件，滚动时触发函数handleScroll() [代码]// 计算容器的最大容积，onReady中触发，即初次渲染时触发 getContainSize() { wx.createSelectorQuery().select('#scrollContainer').boundingClientRect(function (rect) { rect.id // 节点的ID rect.dataset // 节点的dataset rect.left // 节点的左边界坐标 rect.right // 节点的右边界坐标 rect.top // 节点的上边界坐标 rect.bottom // 节点的下边界坐标 rect.width // 节点的宽度 rect.height // 节点的高度 }).exec((option) => { // console.log(~~(option[0].height / this.data.oneHeight) + 2); this.data.containSize = ~~(option[0].height / this.data.oneHeight) + 2; }) }, [代码] 调用api后返回的option中的height就是小程序页面的视口高度，除以oneHeight(210rpx)就是能容纳的个数，用[代码]~~[代码]来对结果进行向下取整(实际能容纳的应+1)，由于在滚动时会出现上一个元素在上边界还没完全消失，第四个元素就从下边界进入视口了，因此最大容纳量应再+1。即实际容纳量应该如图最后一行代码所示+2. [图片] （2）监听滚动事件动态截取数据 监听用户滚动、滑动事件，根据滚动位置，动态计算当前可视区域起始数据的索引位置 startIndex，再根据containsize，计算结束数据的索引位置 endIndex，最后根据 startIndex与endIndex截取长列表所有数据a11Datalist 中需显示的数据列表 showDatalist。 PS：下列代码中函数handleScroll()最下面的[代码]this.setDataStartIndex(data);[代码]才是滚动时真正进行的滚动事件动态截取数据，上面那些代码用途在文章后面部分再详细介绍(节流)。 [代码]// 定义滚动行为事件方法 handleScroll(data) { if (this.data.isScrollStatus) { this.data.isScrollStatus = false; // 节流，设置一个定时器，1秒以后，才允许进行下一次scroll滚动行为 let mytimer = setTimeout(() => { this.data.isScrollStatus = true; clearTimeout(mytimer); }, 17) this.setDataStartIndex(data); } }, [代码] [代码]// 执行数据设置的相关任务， 滚动事件的具体行为 setDataStartIndex(data) { // console.log("scroll active") this.data.startIndex = ~~(data.detail.scrollTop / this.data.oneHeight); // 通过scrollTop滑动后距离顶部的高度除以每个元素的高度，即可知道目前到第几个元素了 this.setData({ showDataList: this.data.allDatalist.slice(this.data.startIndex, this.data.endIndex) }) // 动态截取实际拥有10000条数据的数组中下标为startIndex到endIndex的数组出来呈现在前端页面上 // 容器最后一个元素的索引 if (this.data.startIndex + this.data.containSize <= this.data.allDatalist.length - 1) { this.setData({ endIndex: (!this.data.allDatalist[this.data.endIndex]) ? this.data.allDatalist.length - 1 : this.data.startIndex + this.data.containSize // 滚动到底部了吗，是的话那就将endIndex设置为9999，不然的话设置为startIndex+视口最大容量 }) } else { console.log("滚动到了底部"); this.data.pageNumNow++; // 例如一次性从数据库拿10条数据赋值到allDataList，如果滚动到底部(即allDataList所有数据都已经呈现了)，那就再次向服务器发送请求获取数据库中的下10条数据 this.addMes(); // 该函数内就写你实际向数据库请求时的代码，请求成功后拼接到allDataList即可 console.log(this.data.allDatalist.length) } }, [代码] （3）使用计算属性动态设置上下空白占位 我们设置了根据容器滚动位移动态截取ShowDatalist 数据，现在我们滚动一下发现滚动2条列表数据后，就无法滚动了，这个原因是什么呢？ 在容器滚动过程中，因为动态移除、添加数据节点丢失，进而强制清除了顶部列表元素DOM节点，导致滚动条定位向上移位一个列表元素高度，进而出现了死循环根据 startIndex和endIndex的位置，使用计算属性，动态的计算并设置，上下空白填充的高度样式blankFi11Sty1e，使用padding或者margin 进行空白占位都是可以的 PS：由于小程序没有computed，所以为了使用计算属性，得另外引入封装好computed的包，引入computed组件的教程我放在最后，我使用的是官方推荐的computed，且注意使用该插件时，不要加[代码]this -> this.data[代码]，直接data即可 [代码]computed: { // 定义上空白高度 topBlankFill(data) { // console.log("change") return data.startIndex * data.oneHeight; }, // 定义下空白高度 BottomBlankFill(data) { return (data.allDatalist.length - data.endIndex) * data.oneHeight; }, // 定义一个 待显示的数组列表元素 showDataList(data) { // console.log(data.allDatalist.slice(data.startIndex, data.endIndex)) return data.allDatalist.slice(data.startIndex, data.endIndex) }, }, [代码] （4）下拉置底自动请求加载数据 下方代码中[代码]setDataStartIndex()[代码]函数末尾的if-else便是判断是否已经滚动到现有全部数据的allDataList数组是否已经滚动到底部，全部呈现完了。 如果是那就执行else部分，请求的页数pageNumNow+1，然后调用addMes()请求数据，然后将新请求到的数据进行拼接到allDataList上 [代码]// 执行数据设置的相关任务， 滚动事件的具体行为 setDataStartIndex(data) { // console.log("scroll active") this.data.startIndex = ~~(data.detail.scrollTop / this.data.oneHeight); this.setData({ showDataList: this.data.allDatalist.slice(this.data.startIndex, this.data.endIndex) }) // 容器最后一个元素的索引 if (this.data.startIndex + this.data.containSize <= this.data.allDatalist.length - 1) { this.setData({ endIndex: (!this.data.allDatalist[this.data.endIndex]) ? this.data.allDatalist.length - 1 : this.data.startIndex + this.data.containSize }) } else { console.log("滚动到了底部"); this.data.pageNumNow++; this.addMes(); console.log(this.data.allDatalist.length) } }, // 根据接口数据来给数组添加真实数据 addMes: function () { this.list() .then(res => { // console.log(res.result.data); // 将接口获取到得所有数据存储起来 this.data.allDatalist = this.data.allDatalist.concat(res.result.data); // 设置初始显示列表 this.setData({ showDataList: this.data.allDatalist.slice(0, 5) }) }) }, // 以下为获取数据 list: function () { let pageNum = this.data.pageNumNow; let pageSize = 20; // console.log('当前请求的页码为:' + pageNum); return new Promise((resolve, reject) => { wx.cloud.callFunction({ name: 'teacher', data: { action: 'list', pageNum, pageSize } }).then(res => { resolve(res) }).catch(err => { reject(err) }) }) }, [代码] 到此处，高性能虚拟列表+分页请求的优化已经搞定了，下面开始节流的优化 （5）滚动事件节流定时器优化 由于监听滚动事件触发对应函数方法的频率是极高的，因此页面节流优化是必须的。 方法：在data中声明一个属性scro11State用来记录滚动状态，只有scro11State值为true的时候才会具体执行 PS：下面代码中定时器设置为17ms的原因是，由于小程序没有web的requestAnimationFrame的api，无法作滚动事件节流请求动画帧优化，因此可以手动计算显示器的帧率，大概一帧在17ms，因此定时器设置为17ms [代码]// 定义滚动行为事件方法 handleScroll(data) { //节流部分代码 if (this.data.isScrollStatus) { this.data.isScrollStatus = false; // 节流，设置一个定时器，1秒以后，才允许进行下一次scroll滚动行为 let mytimer = setTimeout(() => { this.data.isScrollStatus = true; clearTimeout(mytimer); }, 17) //节流部分代码 this.setDataStartIndex(data); } }, [代码] 到这为止，节流也搞定啦，觉得从中学到了许多的小伙伴不妨点个赞。 小程序如何引入computed计算属性请参考我的这篇文章：https://developers.weixin.qq.com/community/develop/article/doc/000a4442bd44c84e740d6b6b051413 在后续我也会将高性能虚拟列表+节流的优化封装成一个插件，给小伙伴们直接使用，欢迎关注我以便及时获取到我文章的更新~ 在这里也推荐一篇防抖和节流的性能优化知识介绍的文章：https://segmentfault.com/a/1190000018428170 觉得有帮助的小伙伴欢迎点赞，有其他问题也欢迎在评论区提出

需求 最近几天在忙着搞公司项目的一个新的需求，原因是这样的：公司准备开发一个偏向于社交娱乐项的小程序，其中首页是可以看到用户发的话题帖子之类的，每个帖子都至少包含一张图片或者一个视频， 然后产品那边希望首页可以实现instagram的交互效果，效果图如下(本来应该是显示图片，奈何我的gif图片大小超过两兆，不能上传，所以我就用表情包替换了)： [图片] 嗯，大致上这个就是需求的背景，然后就是每个帖子的高度是不确定的，高度大概在500~600px之间。 实现思路 一开始接到这个需求，其实我心里还是有点慌的，毕竟有一段时间不怎么接触小程序，也不知道小程序更新到什么程度，文档更新到什么程度。仔细分析一下项目需求，大致上可以归类为两个：交互 和 性能优化。 性能优化 因为首页是一个长列表，众所周知，页面一旦渲染的节点过多，就会卡顿，更何况是小程序，并且小程序是分为逻辑层和渲染层，两者通过setData链接，所以处理的时候需要注意两点： setData的数据量不能太大，记得好像是有个大小限制，，忘了是多少，也懒得找:clown_face:，你们可以自己在官方文档上找一下； 页面能够渲染的帖子数量是有限的，在这里，我是控制为最多渲染25个帖子。 处理 针对于长列表的优化，官方也有相应的组件-recycle-view，但是貌似并不符合项目需求，所以被我pass掉了。 虽然没用官方的组件，但是在组件的文档里面把对于长列表得性能优化解释一遍，这里摘抄一下重点： ​ 核心的思路就是只渲染显示在屏幕的数据，基本实现就是监听 scroll 事件，并且重新计算需要渲染的数据，不需要渲染的数据留一个空的 div 占位元素。 其实也就是设置一个变量控制该数据是否可以渲染，如果是不能够渲染得话，那我们就用一个空的view取代它，需要注意的失败的是：空的框架高度需要设置为帖子的高度，这样子才不会闪屏。 针对这种思路，我们就可以确定其中一种长列表的性能优化的解决思路： 将数据分为二维数组，这样子就可以限制每次setData的数据量，等待数据渲染完成之后，获取每组数据所占用的总高度，这里的高度是为了在改组数据不渲染时设置占位框的高度。 [代码]/** * 获取 有渲染，但是高度还没获取到的分组 的高度 */ _getGroupListHeight() { this.data.list.forEach((item, index) => { if (item.show && !item.height) { const id = 'XXXXXXXX' // 组的id let query = wx.createSelectorQuery() query.select(id).boundingClientRect(rect => { this.data.list[index].height = rect.height }).exec(); this.getTopicHeight(item.data, index) // 获取列表中每个话题的高度，用于计算滑动时要滚动的距离 } }) } [代码] 上面就是一个简单获取每组的高度的代码实例，当该组数据有被渲染但是高度不明的情况下，就会去获取，加一步判断是为了防止重获获取组的数据，造成不必要的浪费。在获取每组数据的高度时，还会对应去 获取该组的每个帖子的高度，这样子是为了后面实现 仿instagram 交互做准备。 获取到了每组数据的高度，接下来，我们就可以监听页面滚动的高度，从而控制需要渲染的数据，需要注意的一点是，我们需要在该组的数据基础上，多渲染上两组和下两组数据，目的是防止用户快速滑动的时候出现白屏的不友好体验。当然也可以根据自己的需要多渲染几组。 [代码]/** * 页面滚动 * @param e */ onPageScroll(e) { // android页面滑动处理(非仿instagram版本) if (!this.data.isIos && !this.data.scrollBoxInfo.canUseScrollBox) { // 1. 处理当前页面正在播放的视频 if (this.data.currentPlayingId && Math.abs(e.scrollTop - this.data.scrollTop) > 100) { this.selectComponent(this.data.currentPlayingId).pauseVideo() this.data.currentPlayingId = '' } // 2. 处理 Andorid 渲染的分组数据 this._dealAndroidScroll(e) // 3. 处理视频自动播放 if (this.timer) { clearTimeout(this.timer) } this.timer = setTimeout(() => { this.data.scrollTop = e.scrollTop // 记录下当前的滚动距离，滑动暂停视频播放的时候需要用到 this.handleAutoPlay(e) // 视频自动播放 }, 300) } } /** * Android 监听滚动，动态设置分组 * @param {Object} e */ _dealAndroidScroll(e) { let max_height = 0 // 最大高度 for (let i = 0; i <= this.data.topicScroll.show_index; i++) { max_height += this.data.list[i].height } let min_height = max_height - this.data.list[this.data.topicScroll.show_index].height // 最小高度 // 超过，+1 if (e.scrollTop > max_height && this.data.topicScroll.show_index < this.data.list.length - 1) { ++this.data.topicScroll.show_index this._dealListShow(this.data.topicScroll.show_index) } // 小于，-1 if (e.scrollTop < min_height) { --this.data.topicScroll.show_index this._dealListShow(this.data.topicScroll.show_index) } } [代码] 这里没有对代码进行过滤，代码实现的效果就是监听滚动到的位置，并且设置渲染分组数据，因为有些是视频帖子，所以需要在滚动完成之后实现自动播放视频的功能。这段代码只是处理anroid平滑滚动的情况，因为代码涉及到 instagram 交互的实现。 对于长列表性能优化的思路大致上就这样：数据分为二位数组，渲染指定分组的数据，减少渲染的数据量和需要渲染的节点数量， 不需要渲染的数据就用指定高度的空的view替代，指定高度是为了防止闪屏。 仿 instagram 交互实现 从上面的 instagram 交互视频可以看出来，我们需要监听用户的手势滑动从而控制帖子的切换，并且每次切换只是切换一个帖子。知道了交互的详情，我们就可以展开想象了，大致上可以给个基本的实现思路： 监听手指点击和手指离开的事件，记录下手指点击的高度 && 手指离开的高度，用来判断用户滑动的距离和方向；记录下手指点击 和 手指离开的时间，可以粗略用来判断用户当前的滑动行为是快滑还是慢滑。根据上面的得到的信息，我们基本上实现滑动切换帖子的操作： [代码]/** * 监听手指点击操作 * @param e */ touchStart(e) { this.data.topicScroll.startTimeStamp = new Date().getTime() // 记录下当前手指点击事件 this.data.topicScroll.startPosition = e.changedTouches[0].clientY // 记录下手指开始点击的位置 }, /** * 手指离开屏幕 * @param e */ touchEnd(e) { const diffTime = new Date().getTime() - this.data.topicScroll.startTimeStamp // 手指离开的时候的时间戳 const clientY = e.changedTouches[0].clientY // 手指离开屏幕的位置 const diffY = Math.abs(clientY - this.data.topicScroll.startPosition) // 手指滑动的距离 const direction = this.data.topicScroll.startPosition - clientY > 0 // 手指滑动的方向，true为向上滑，false为向下滑 const scrollInfo = this.data.topicScroll // 1. 第一个节点手指向下滑动 && 最后一个节点手指向上滑动 不做操作 if (!scrollInfo.parent_index && !scrollInfo.child_index && !direction) { return } // 第一个节点向下滑动不做操作 if (scrollInfo.parent_index === (this.data.list.length - 1) && scrollInfo.child_index === (this.data.list[scrollInfo.parent_index].data.length - 1) && direction) { return } // 最后一个节点向上滑动不做操作 // 2. 根据滑动的方向，判断需要滚动到哪个节点下 const can_move = (diffTime < 100 && diffY > 50) || (diffTime >= 100 && diffY > 80) // 是否可以滑动，手势滑动判断依据 if (can_move) { if (direction) { if (scrollInfo.child_index === 4) { ++scrollInfo.parent_index scrollInfo.child_index = 0 } else { ++scrollInfo.child_index } } else { if (scrollInfo.child_index === 0) { --scrollInfo.parent_index scrollInfo.child_index = 4 } else { --scrollInfo.child_index } } } // 3. 处理滚动 this._dealScroll(can_move ? pausePlayId : '', can_move) } [代码] 根据监听到信息，可以判断是否切换以及切换到那个帖子的操作，所以我们只需要根据面已经获取到的帖子高度就可以计算出来要滚动的高度。 2. 根据第一点的操作，我们就可以实现 仿Instagram 交互效果，但是忽略了致命的一点：页面的惯性滚动。也正是因为这个所谓的“惯性滚动”，我多花了几天的时间去研究交互的实现💥 众所周知，为了使得页面的滑动更加流畅，当我们滑动停止的时候，页面就像会产生惯性一般，自动的滑动一定距离才停下。 安卓下默认有惯性滚动，而在 iOS 下需要额外设置-webkit-overflow-scrolling: touch的样式 而第一点方案实现的大前提是页面不能拥有惯性滚动，否则的话页面无法准确滚动到指定位置。 解决方案 ios的解决方案比较简单，我们只需要设置 -webkit-overflow-scrolling: auto 的样式即可。 比较麻烦的是android的实现，一开始我是上网找了不少的资料去实现取消页面的惯性滚动，毕竟页面滚动的性能是最好的。不过很可惜，我没有找到可行的方案，所以我选择退而求其次，模拟手指的滑动。经过对小程序文档的浏览，我选择可两种比较可能实现的方案：①使用wxs实现手指滑动的效果；②使用scroll-view的fast-deceleration 属性。显而易见，使用wxs方案实现比较复杂，所以我一开始选择scroll-view这个方案。 android实现思路 scroll-view方案实现的思路与ios类似，比较不同的是页面的滚动，因为ios是可以直接使用页面滚动的，即wx.pageScrollTo，而scroll-view则是使用scroll-into-view 或者 scroll-top，为了减少操作，我是直接使用了scroll-top这个属性。正当我信心满满的时候，做出来的效果却是打了我的脸：每次滚动到指定位置的时候都会抖动一下，虽然没有仔细去查明原因，不过 我猜想是页面滚动依然存在一定的惯性滚动，当我们设置了scroll-top的时候，惯性滚动的存在会使得列表偏移位置，最后在偏移回来，这样子看起来就像是抖动了一下。 正当我准备放弃scroll-view这个方案的时候，无意中让我发现了scroll-view的api接口，本着想试一下新接口的心态，我尝试一下使用官方的api接口控制scroll-view滚动，神奇的是，成了！！！！ （此处为效果图） 既然scroll-view做出来的效果勉强还可以，我就直接pass后面的wxs方案，毕竟那一块的逻辑应该会比较复杂。 [代码] 因为时使用了scroll-view的api接口，支持的版本库比较高，是2.14.4，虽然大部分的用户可以支持，但还是要兼容少部分的用户，所以android部分我是搞了一个scroll-view版本和平滑滚动版本 fast-deceleration这个特性在开发者工具那里貌似不生效，但是手机预览却是可以，不知道是开发工具的问题还是说只是兼容了部分手机（我这边测试了小米和华为这两款，没更多的手机测试了:clown_face:） [代码] demo 说了这么多，也不一定有人看得下去，demo呈上 结尾 在调试这个效果的时候，遇到不少的坑，其中有一个坑印象巨深，在此记录一下： touch 期间 touchstart 的目标节点被移除，则对应的 touchend 事件会因为没有目标节点而缺失。 遇到这个坑是因为小程序同个页面不允许存在多个视频，所以需要将没有播放的视频使用图片替换，需要播放的视频的时候就替换回来，这样子，就会出现上面的情况，导致无法监听到touchend事件，整个列表停在原地，没有滚动到指定位置。 原文链接 传送门

1.背景 如今信息流业务是各大互联网公司争先抢占的一个大面包，为了提高用户的后续消费，产品想出了各种各样的方法，例如在微视中，用户可以无限上拉出下一条视频；在知乎中，也可以无限上拉出下一条回答。这样的操作方式用户体验更好，后续消费也更多。最近几年的时间，微信小程序已经从一颗小小的萌芽成长为参天大树，形成了较大规模的生态，小程序也拥有了一个很大的流量入口。 2.demo体验 那如何才能在小程序中实现类原生APP效果的下一条无限刷体验？ 这篇文章详细记录了下一条无限刷效果的实现原理，以及细节和体验优化，并将相关代码抽象成一个微信小程序代码片段，有需要的同学可查看demo源码。 线上效果请用微信扫码体验： [图片] 小程序demo体验请点击：https://developers.weixin.qq.com/s/vIfPUomP7f9a 3.实现原理 出于性能和兼容性考虑，我们尽量采用小程序官方提供的原生组件来实现下一条无限刷效果。我们发现，可以将无限上拉下一篇的文章看作一个竖向滚动的轮播图，又由于每一篇文章的内容长度高于一屏幕高度，所以需要实现文章内部可滚动，以及文章之间可以上拉和下拉切换的功能。 在多次尝试后，我们最终采用了在[代码]<swiper>[代码]组件内部嵌套一个[代码]<scroll-view>[代码]组件的方式实现，利用[代码]<swiper>[代码]组件来实现文章之间上拉和下拉切换的功能，利用[代码]<scroll-view>[代码]来实现一篇文章内部可上下滚动的功能。 所以页面的dom结构如下所示： [代码]<swiper class='scroll-swiper' circular="{{false}}" vertical="{{true}}" bindchange="bindChange" skip-hidden-item-layout="{{true}}" duration="{{500}}" easing-function="easeInCubic" > <block wx:for="{{articleData}}"> <swiper-item> <scroll-view scroll-top="0" scroll-with-animation="{{false}}" scroll-y > content </scroll-view> </swiper-item> </block> </swiper> [代码] 4.性能优化 我们知道view部分是运行在webview上的，所以前端领域的大多数优化方式都有用。例如减少代码包体积，使用分包，渲染性能优化等。下面主要讲一下渲染性能优化。 4.1 dom优化 由于页面需要无限上拉刷新，所以要在[代码]<swiper>[代码]组件中不断的增加[代码]<swiper-item>[代码]，这样必然会导致页面的dom节点成倍数的增加，最后非常卡顿。 为了优化页面的dom节点，我们利用[代码]<swiper>[代码]的[代码]current[代码]和[代码]<swiper-item>[代码]的[代码]index[代码]来做优化，控制是否渲染dom节点。首先，仅当[代码]index <= current + 1[代码]时渲染[代码]<swiper-item>[代码]，也就是页面中最多预先加载出下一条，而不是将接口返回的所有后续数据都渲染出来；其次，对于用户已经消费过的之前的[代码]<swiper-item>[代码]，不能直接销毁dom节点，否则会导致[代码]<swiper>[代码]的[代码]current[代码]值出现错乱，但是我们可以控制是否渲染[代码]<swiper-item>[代码]内部的子节点，我们设置了仅当[代码]current <= index + 1 && index -1 <= current[代码]时才会渲染[代码]<swiper-item>[代码]中的内容，也就是仅渲染当先文章，及上一篇和下一篇的文章内容，其他文章的dom节点都被销毁了。 这样，无论用户上拉刷新了多少次，页面中最多只会渲染3篇文章的内容，避免了因为上拉次数太多导致的页面卡顿。 4.2 分页时setData的优化 setData工作原理 [图片] 小程序的视图层目前使用[代码]WebView[代码]作为渲染载体，而逻辑层是由独立的 [代码]JavascriptCore[代码] 作为运行环境。在架构上，[代码]WebView[代码] 和 [代码]JavascriptCore[代码] 都是独立的模块，并不具备数据直接共享的通道。当前，视图层和逻辑层的数据传输，实际上通过两边提供的 [代码]evaluateJavascript[代码] 所实现。即用户传输的数据，需要将其转换为字符串形式传递，同时把转换后的数据内容拼接成一份 [代码]JS[代码] 脚本，再通过执行 [代码]JS[代码] 脚本的形式传递到两边独立环境。 而 [代码]evaluateJavascript[代码] 的执行会受很多方面的影响，数据到达视图层并不是实时的。 每次 [代码]setData[代码] 的调用都是一次进程间通信过程，通信开销与 setData 的数据量正相关。 [代码]setData[代码] 会引发视图层页面内容的更新，这一耗时操作一定时间中会阻塞用户交互。 [代码]setData[代码] 是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口。 避免不当使用setData [代码]data[代码] 应仅包括与页面渲染相关的数据，其他数据可绑定在this上。使用 [代码]data[代码] 在方法间共享数据，会增加 setData 传输的数据量，。 使用 [代码]setData[代码] 传输大量数据，通讯耗时与数据正相关，页面更新延迟可能造成页面更新开销增加。仅传输页面中发生变化的数据，使用 [代码]setData[代码] 的特殊 [代码]key[代码] 实现局部更新。 避免不必要的 [代码]setData[代码]，避免短时间内频繁调用 [代码]setData[代码]，对连续的setData调用进行合并。不然会导致操作卡顿，交互延迟，阻塞通信，页面渲染延迟。 避免在后台页面进行 [代码]setData[代码]，这样会抢占前台页面的渲染资源。可将页面切入后台后的[代码]setData[代码]调用延迟到页面重新展示时执行。 优化示例 无限上拉刷新的数据会采用分页接口的形式，分多次请求回来。在使用分页接口拉取到下一刷的数据后，我们需要调用[代码]setData[代码]将数据写进[代码]data[代码]的[代码]articleData[代码]中，这个[代码]articleData[代码]是一个数组，里面存放着所有的文章数据，数据量十分庞大，如果直接[代码]setData[代码]会增加通讯耗时和页面更新开销，导致操作卡顿，交互延迟。 为了避免这个问题，我们将[代码]articleData[代码]改进为一个二维数组，每一次[代码]setData[代码]通过分页的 [代码]cachedCount[代码]标识来实现局部更新，具体代码如下： [代码]this.setData({ [`articleData[${cachedCount}]`]: [...data], cachedCount: cachedCount + 1, }) [代码] [代码]articleData[代码]的结构如下： [图片] 4.3 体验优化 解决了操作卡顿，交互延迟等问题，我们还需要对动画和交互的体验进行优化，以达到类原生APP效果的体验。 在文章间上拉切换时，我们使用了[代码]<swiper>[代码]组件自带的动画效果，并通过设置[代码]duration[代码]和[代码]easing-function[代码]来优化滚动细节和动画。 当用户阅读文章到底部时，会提示下一篇文章的标题等信息，而在页面上拉时，由于下一篇文章的内容已经加载出来了，这样在滑动过程中会出现两个重复的标题。为了避免这种情况出现，我们通过一个占满屏幕宽高的空白[代码]<view>[代码]来将下一篇文章的内容撑出屏幕，并在滚动结束时，通过[代码]hidden="{{index !== current && index !== current + 1}}"[代码]来隐藏这个空白[代码]<view>[代码]，并对这个空白[代码]<view>[代码]的高度变化增加动画，来实现下一篇文章从屏幕底部滚动到屏幕顶部的效果： [代码].fake-scroll { height: 100%; width: 100%; transition: height 0.3s cubic-bezier(0.167,0.167,0.4,1); } [代码] [图片] 而当用户想要上拉查看之前阅读过的文章时，我们需要给用户一个“下滑查看上一条”提示，所以也可以采用同上的方式，通过一个占满屏幕宽高的提示语[代码]<view>[代码]来将上一篇文章的内容撑出屏幕，并在滚动结束时，通过[代码]wx:if="{{index + 1 === current}}"[代码]来隐藏这个提示语[代码]<view>[代码]，并对这个提示语[代码]<view>[代码]的透明度变化增加动画，来实现下拉时提示“下滑查看上一条”的效果： [代码].fake-previous { height: 100%; width: 100%; opacity: 0; transition: opacity 1s ease-in; } .fake-previous.show-fake-previous { opacity: 1; } [代码] 至此，这个类原生APP效果的下一条无限刷体验的需求的所有要点和细节都已实现。 记录在此，欢迎交流和讨论。 小程序demo体验请点击：https://developers.weixin.qq.com/s/vIfPUomP7f9a

有这样一个需求。从A页面访问B页面，B页面需要刷新加载，从B页面返回A页面，A页面缓存处理。你会怎么处理？ 场景：列表页访问详情页面后，从详情页面返回列表页面时，列表页面滚动到上次浏览的位置。方便用户继续浏览。 需求分析 1.如果想要A页面停留在上次浏览的位置，必须记录离开A页面前的浏览位置。 2.如何区分是否缓存处理？ 3.A页面如何滚动到上次浏览的位置？ 如何Coding？ 如何记录离开A页面前的浏览位置？ 我们可以利用Vue Router 来处理, Vue Router中提供了一个名为beforeRouteLeave方法，可以处理离开页面前的一些操作。 我们可以在A页面中加入这样的一个方法，来记录当前的页面浏览位置。并保存到meta中。 [代码]// A页面 beforeRouteLeave (to, from, next) { let position = document.documentElement.scrollTop || document.body.scrollTop from.meta.savedPosition = position next() } [代码] 如何区分是否缓存处理？ 我们依旧可以利用 Vue 的 keep-alive 组件 和 Vue 的 Router 共同处理，在根组件（以App.vue为例）中，加入下面代码。 [代码]// 在Vue router中标记是否需要缓存处理 { name: 'A', path: '/a', component: () => import('@/pages/A'), meta: { keepAlive: true // keepAlive为 true表示缓存处理 } }, [代码] [代码]<!-- App.vue --> <!-- 如果路由里面的meta存在keepAlive，就缓存处理 --> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> [代码] 如何加载到上次浏览位置？ 我们可以利用Vue Router中提供的一个名为scrollBehavior的方法。 [代码]scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { if (to.meta.savedPosition) { // 如果meta信息中存在savedPosition，页面就滚动到上次浏览的位置（savedPosition） return { x: 0, y: to.meta.savedPosition} } return { x: 0, y: 0 } } } [代码]

我们永远没有资格说放弃,因为这是属于我们的年华,应该开出耀眼的繁花。 这里主要讲解两点使用方式 wxs --> 数据处理使用 wxs --> 拖拽使用 wxs介绍 1.先看看官方如何介绍的 ，如下 点我可以查看更多官方文档地址 WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。 WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。 WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。 WXS 函数不能作为组件的事件回调。 由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。 总的来说，我主要看中它快和方便 （有种在wxml写函数的感觉），并且处理函数内容后渲染不需要去调用setData，可以节省在请求数据返回后写大量的逻辑函数或者遍历方法去处理事务，所以我才拿出来讲解。 wxs数据处理使用 使用我习惯现在utils文件夹里创建一个common.wxs，然后在使用的wxml引入该文件。具体使用也很简单，如下 在你定义的common.wxs文件里，写你需要处理的函数，然后使用export导出 [代码] var getMax = function(array) { var max = undefined; for (var i = 0; i < array.length; ++i) { max = max === undefined ? array[i] : (max >= array[i] ? max : array[i]); } return max; } module.exports = { getMax: getMax }; [代码] 在.wxml文件需要的地方引入该.wxs文件，其中<wxs>标签包含2个重要属性，[代码]module[代码]和[代码]src[代码]<br> module表示你要导出wxs的方法集合，在wxml里面可以使用该方法名去使用具体的函数<br> src表示你.wxs路径位置引入，代码如下 [代码]<wxs module="common" src="../../utils/common.wxs"></wxs> <view> <text>{{common.getMax(arrNumber)}}</text> </view> [代码] 上面代码里[代码]arrNumber[代码]是你页面.js文件里面定义的数据 [代码]data: { arrNumber: [1,2,9,2,1,5,7] } [代码] 就是如此简单，你已经学会了使用wxs处理数据了，接下来我们来点难的，使用wxs做一个可以随便拖动又不影响小程序性能的手势拖拽事件 wxs拖拽使用 你是否还在使用setData控制元素？为什么不能频繁使用setData，点我查看详情然后通过输出手势坐标来移动元素具体位置？如果是建议你该换个方法了，推荐使用wxs，让你小程序性能上一个档次。 解决思路如下： 我们先在页面的.wxml文件书写初始化的样式内容； 给[代码]view[代码]标签绑定手势事件，其中[代码]touchmove[代码]我使用了阻止冒泡事件绑定是为了防止在苹果机中，元素移动会带着屏幕一起移动，导致滑动手势突然中断不流畅， [代码]clickLive[代码]事件我也用了阻止冒泡事件是为了触发子元素的事件防止点击被父元素拦截而使用，代码如下： [代码]<wxs module="comm" src="../../utils/common.wxs"></wxs> <view class="enterLive liveMove" data-maxWidth="{{windowWidth}}" data-maxHeight="{{windowHeight}}" bind:touchstart="{{comm.liveTouchmove}}" catch:touchmove="{{comm.liveTouchmove}}" bind:touchend="{{comm.liveTouchmove}}"> <view class="live-block" catch:tap="{{comm.clickLive}}"> <image class="liveEnter-img" mode="aspectFit" src="https://img0.baidu.com/it/u=401284325,23907343&fm=26&fmt=auto&gp=0.jpg" /> </view> </view> [代码] 我们发现上面的代码有[代码]windowWidth,windowHeight[代码]两个参数，这是在页面的.js中，是计算当前页面的宽高，用于防止滑块滑出视野范围内，导致无法滑动回来，其中下面代码[代码]getApp().globalData.systemInfo[代码]是读取全局文件[代码]app.js[代码]里面拿值的，那里我有获取系统参数设为全局保存， 而[代码]bindEnter[代码]事件是用于待会在[代码].wxs[代码]里面可以触发.js文件内函数示例 [代码]data: { windowWidth: 375, windowHeight: 667, }, ready: function() { let systemInfo = getApp().globalData.systemInfo; let width = 150 * systemInfo.windowWidth / 750; let height = 150 * systemInfo.windowWidth / 750; if (systemInfo) { this.setData({ windowWidth: systemInfo.windowWidth - parseInt(width), windowHeight: systemInfo.windowHeight - parseInt(height) }) } }, bindEnter(e) { wx.showToast({ title: '你点击到我啦~', icon: 'none' }) }, [代码] 接下来我们将书写.wxs文件，处理手势输出内容，使页面的滑块可以平静的滑动； 认真看的同学会发现页面的[代码]touchstart,touchmove,touchend[代码]事件我都是绑定同一个函数[代码]liveTouchmove[代码]这里是我想节约函数名称，统一使用一个函数，然后在输出的回调里面判断当前是什么手势 这里的滑块滑动逻辑是：当输出是touchstart手势时，我们记住当前滑块的[代码]starLeft,starTop[代码]值及坐标[代码]starX,starY[代码]值 当我们判断当前是[代码]touchmove[代码]手势时，我们就用当前的x,y坐标值减去开始starX和starY坐标值，得到一个差值[代码]diffX,diffY[代码] 然后我们使用这个[代码]diffX,diffY[代码]差值分别加上滑块刚开始的[代码]starLeft,starTop[代码]值，即可得到我们滑块当前移动的位置 最后我们通过条件判断当前是否超出屏幕即可，我这里做多一步，就是滑块永远停留左右两边，所以要多算一次滑块停留是偏离那一边，在通过[代码]ownerInstance.selectComponent('.liveMove').setStyle[代码]可以给页面元素添加行内样式。 滑动滑动逻辑已经讲完了，就是这么简单 如果你想通过[代码].wxs[代码]函数触发[代码].js[代码]文件内的函数，这里有提供[代码]ownerInstance.callMethod("bindEnter")[代码]方法给你触发.js里面的函数，其中[代码]ownerInstance[代码]是绑定页面函数的第二个回调参数，[代码]callMethod[代码]是官方提供的一个方法，[代码]bindEnter[代码]是.js文件里自己命名的函数方法名称，整体代码如下：更多wxs内置方法，请查看官方文档 [代码]/** * 滑块计算位置 */ var starLeft = 0; var starTop = 0; var starX = 0; var starY = 0; function liveTouchmove(event, ownerInstance) { // console.log(JSON.stringify(event)) // console.log(JSON.stringify(ownerInstance)) var left = 0, top = 0; var diffX = 0, diffY = 0; if(event.type === 'touchstart') { starLeft = event.currentTarget.offsetLeft; starTop = event.currentTarget.offsetTop; starX = event.changedTouches[0].clientX; starY = event.changedTouches[0].clientY; left = starLeft; top = starTop; } else { diffX = event.changedTouches[0].clientX - starX; diffY = event.changedTouches[0].clientY - starY; left = starLeft + diffX; top = starTop + diffY; var maxWidth = event.currentTarget.dataset.maxwidth; var maxHeight = event.currentTarget.dataset.maxheight; if (left > maxWidth) { left = maxWidth; } if (top > maxHeight) { top = maxHeight; } if (left <= 0) { left = 0; } if (top <= 0) { top = 0; } } if (event.type === 'touchend') { if (maxWidth / 2 < left) { left = "calc(100% - 3% - 152rpx)"; } if (maxWidth / 2 > left) { left = '3%'; } } else { left = left + 'px'; } var instance = ownerInstance.selectComponent('.liveMove'); // 返回组件的实例 instance.setStyle({ left: left, top: top +'px', }); } /** * 点击直播入口 * @param */ function clickLive (event, ownerInstance) { ownerInstance.callMethod("bindEnter"); } module.exports = { liveTouchmove: liveTouchmove, clickLive: clickLive, }; [代码] 总结 wxs确实可以解决我们一些性能问题，和wxml函数调用方便，但是我们也要注意几个问题 目前还不支持原生组件的事件、input和textarea组件的 bindinput 事件 1.02.1901170及以后版本的开发者工具上支持交互动画，最低版本基础库是2.4.4 目前在WXS函数里面仅支持console.log方式打日志定位问题，注意连续的重复日志会被过滤掉。 wxs有自己的语法，我理解为不支持ES6及以上语法更多wxs语法可以查看官方文档 以上内容，包括之前写的文章内容，最终会上传到我的gitee里面，请留意。 文章创作不易，喜欢的记得点赞 本文同步掘金号文章 喜欢的记得去点个赞哦

wx.createSelectorQuery获取元素宽，写在onReady里面但一直返回null，后发现加定时器就可以获取宽，所以是页面没有渲染完成，所以要找到渲染完成事件，再执行获取元素宽

因为最近要写个做题页面，要求左右滑动切换页面。题目数量三位数会导致swiper卡顿严重，找了下相关文章没有发现合适的，就自己写了下。 实现功能 1、可以加载大量数据 2、跳转任意index 3、实现代码简单，方便复用 [图片] 直接帖代码 // pages/swiper/swiper.js Page({   /**    * 页面的初始数据    */   data: {     dataList: [], //实际数据     list: [], //展示数据     currentIndex: 0, //真实的index     current: 0, //swiper当前的index     recordCurrent: 0, //swiper上次的index     duration: 300 //动画时常   },   /**    * 生命周期函数--监听页面加载    */   onLoad: function (options) {     for (let i = 0; i < 1000; ++i) {       this.data.dataList.push(i)     }     this.setData({       dataList: this.data.dataList     })     this.upSwiper(0)   },   animationfinish({     detail   }) {     // 用户滑动     if (detail.source == "touch") {       // 滑动后的index       this.upSwiper(this.data.currentIndex + detail.current - this.data.recordCurrent)     }   },   upSwiper(index) {     // 防止越界     if (index < 0 || index >= this.data.dataList.length) {       return     }     this.setData({       currentIndex: index     })     // 更新数据     let list = []     for (let i = this.data.currentIndex - 1; i <= this.data.currentIndex + 1; ++i) {       let item = this.data.dataList[i]       if (typeof (item) !== "undefined") {         list.push(item)       }     }     let current = 0;     // 只要不是第一个页面 current都是1      if (index != 0) {       current = 1     }     // 取消动画     this.setData({       duration: 0     })     // current 和 list要同时更新，不然数据会闪     this.setData({       current: current,       recordCurrent: current,       duration: 300,       list     })   },   tap(ev) {     let index = ev.currentTarget.dataset.index     this.upSwiper(index)   } }) <!--pages/swiper/swiper.wxml--> <swiper id="swiper" current="{{current}}" duration="{{duration}}" bindanimationfinish="animationfinish">   <swiper-item wx:for="{{list}}" wx:for-item="ee">     <view wx:for="{{20}}">{{ee}}</view>   </swiper-item> </swiper> <view class="but-z"><button catchtap="tap" data-index="{{0}}">0</button> <button catchtap="tap" data-index="{{5}}">5</button> <button catchtap="tap" data-index="{{dataList.length-1}}">{{dataList.length-1}}</button> </view> /* pages/swiper/swiper.wxss */ #swiper {   width: 100vw;   height: 100vh; } .but-z {   position: fixed;   bottom: 20px;   height: 40px;   width: 100vw;   display: flex } button {   background-color: red;   width: 100rpx !important;   text-align: center; }