- EventChannel 页面间数据传递 是 引用类型
项目中遇到,通过navigateTo跳转新页面,通过EventChannel,acceptDataFromOpenerPage,获取到数据。 在新页面中setData数据、修改数据,返回老页面,再回到新页面,数据竟然是上次setData改变过的数据,而不是老页面原有的数据。 说明通过EventChannel传递的数据是引用类型数据。 解决办法是在新页面获取到数据后,深拷贝数据,再setData,处理修改数据。这样保持独立,不会污染老页面的数据。
2022-03-24 - 微信小程序答题页 swiper分页 极简
因为最近要写个做题页面,要求左右滑动切换页面。题目数量三位数会导致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; }
2021-12-14