- 小程序地图自定义气泡在真机上不能实现只显示一个气泡隐藏其他气泡?
小程序地图的自定义气泡calloutcustomCallout在手机上不能实现只显示点击的当前气泡,隐藏之前点击的其他气泡;但是在电脑微信开发者工具里不会出现这种情况,请问有没有解决办法???
2021-09-01 - 动态预加载 swiper-item 中的图片(延迟加载)
在使用 swiper 时,有些场景需要一次载入的图片太多,消耗资源的同时也会影响用户体验。 [图片] 自己的解决方法是这样的: 创建图片【地址数组】根据需要展示图片的总数创建一个空的数组,即用来页面绑定的【页面数组】初始化【页面数组】,为第 1、2 项赋值当向右滑动时,接着为【页面数组】的第 3 项赋值直到全部展示完毕[图片] 如果用户提前离开,就能避免未展示项图片的加载。 代码如下: <view class="s-page"> <swiper class="s-swiper" snap-to-edge="false" indicator-dots="true" bindchange="swiperChange"> <block wx:for="{{pageList}}" wx:key="*this"> <swiper-item class="s-swiper_item"> <view>{{item}}</view> </swiper-item> </block> </swiper> </view> Page({ /** * 页面的初始数据 */ data: { imageUrlList: ['url 1', 'url 2', 'url 3', 'url 4', 'url 5', 'url 6', 'url 7'], pageList: [], currentPageIndex: 0 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { // 根据图片总数,创建需要渲染的空数组 let pageList = new Array(this.data.imageUrlList.length).fill(''); // 初始化渲染数组,载入第1张,并且预载入下一张 pageList[this.data.currentPageIndex] = this.data.imageUrlList[this.data.currentPageIndex]; pageList[this.data.currentPageIndex + 1] = this.data.imageUrlList[this.data.currentPageIndex + 1]; // 渲染页面 this.setData({ pageList: pageList }) console.log(this.data.pageList); }, swiperChange: function (e) { let oldPageIndex = this.data.currentPageIndex, // 之前展示的页面索引 newPageIndex = e.detail.current; // 滑动后新展示的页面索引 // 判断是否由用户触摸引起的 if (e.detail.source == 'touch') { console.log(newPageIndex); // 判断滑动方向 if (oldPageIndex < newPageIndex) { console.log('向右滑动'); // 判断是否到最后一张,并且地址信息是否为空 if (newPageIndex < this.data.imageUrlList.length - 1 && !this.data.pageList[newPageIndex + 1]) { this.data.pageList[newPageIndex + 1] = this.data.imageUrlList[newPageIndex + 1] console.log('预加载成功'); } // 渲染页面 this.setData({ currentPageIndex: newPageIndex, pageList: this.data.pageList }) } else if (oldPageIndex > newPageIndex) { console.log('向左滑动'); this.data.currentPageIndex = newPageIndex; } } console.log(this.data.pageList); } }) 如果不显示“面板指示点”,那么【页面数组】直接创建一个空数组即可。 自己的笨办法,如果有更好的方法,请不吝赐教!
2021-07-07