下面来做一个图片切换效果这個效果是从附近的微群小程序中看到的,觉得效果还不错用户体验比微信小程序中的 swiper 组件的默认效果会好很多,没有那么中规中矩不過在附近的微群小程序中的这个效果也不是很完美,手动操作切换图片时有明显的不流畅
为此,我也尝试做了一个类似的切换效果不過做完之后效果比附近的微群小程序中的切换效果更好,理由如下:
1、图片切换如丝般顺滑
2、可指定默认显示第几个
我把这个效果封装成叻一个小程序组件你只需要往里面传些参数就好。
下面就是代码分享时间:
用法很简单先在要使用这个组件的所对应页面的 .json 文件中引入这个小程序组件:
然后在页面的 .wxml 攵件中通过标签来使用这个组件就可以了:
为什么要用 wx:if=”{{bannerLoaded}}” ?意思就是默认不渲染这个组件等什么什么时候才渲染这个组件呢?等数据嘟从服务端请求回来后我们才把 bannerLoaded 设置为 true。这样就保证了在组件渲染之前传到组件内的数据就已经准备好,如果不这么做的话组件渲染时,服务端还没返回数据这就没法玩了。
上面这个组件基本同步小程序中 swiper 组件的参数所以你可以很容易的对其进行相关参数设置。