微信小程序 开发之滑块视图容器(swiper)详解及实例代码
更新时间：2017年02月22日 10:13:53 作者：何东_hd
这篇文章主要介绍了微信小程序 开发之滑块视图容器(swiper)详解及实例代码的相关资料,需要的朋友可以参考下
微信小程序 开发之滑块视图容器详解
实现效果图：
实现起来特别简单，看看代码是怎么写的呢：
<swiper class="swiper" indicator-dots="{{indcatorDots}}" autoplay="{{autoPlay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}" wx:for-index="index">
<swiper-item>
<image src="{{item}}" class="side-img"></image>
</swiper-item>
</block>
</swiper>
这就是布局了，看一下js里面代码：
Page({
data: {
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'],
indcatorDots: true,
autoPlay: true,
interval: 5000,
duration: 500
},
，swiper有以下一些常用属性：
标记的两个属性暂时不管。
注意：其中只可放置组件，否则会导致未定义的行为。
swiper-item
仅可放置在组件中，宽高自动设置为100%。
就是这样，自己动手试试。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关文章
原型是function对象下的属性，它定义了构造函数的共同祖先，也就是一个父子级的关系,子对象会继承父对象的方法和属性,每个实例对象下都有__proto__属性，通过属性__proto__指向构造函数的原型对象,当到达末端时，返回null,这样一层一层向顶端查找，就形成了原型链2021-10-10
这篇文章主要介绍了JS实现一个微信录音功能过程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要为大家介绍了JavaScript节点的增删改查深入学习示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了微信小程序 表单Form实例详解的相关资料,这里对form 表单进行了详细介绍，并附实例代码，需要的朋友可以参考下2016-12-12
自行实现Promise.allSettled的Polyfill处理
这篇文章主要为大家介绍了自行实现Promise.allSettled 的 Polyfill处理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要为大家介绍了delete 语法的本质深入解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
本文将详细介绍JS编程风格的几个要点与JS代码优化的几点建议,需要的朋友可以参考下2020-02-02
这篇文章主要为大家介绍了JavaScript集成公式编辑器示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要为大家介绍了JS前端可视化GraphQL使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要为大家介绍了Three.js引用和环境搭建过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
最新评论