微信小程序的视图容器

2019独角兽企业重金招聘Python工程师标准>>>

swiper滑动面板(又称滑块视图容器，常见的轮播图)

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所在页面的index
interval	Number	5000	自动切换时间间隔
duration	Number	1000	滑动动画时长
bindchange	EventHandle		current改变时会触发change事件，event.detail={current:current}

注意：其中只可放置swiper-item组件，其他节点会被自动删除

swiper-item

仅可放置在swiper组件中，宽高自动设置为100%

在.wxml文件中设置swiper

设置indicator-dots="true"显示面板指示点，当前页面为第4页，每次页面切换的时间为5000ms，滑动时长1000ms，绑定页面改变触发事件bindChange。页面显示的图片在imgArray数组中，通过wx：for绑定。

<swiper-item>

</swiper-item>

</block>

</swiper>

在.wxsss中设置图片的宽度

.img{

width:100%;

}

在.js中设置保存图片的数组imgArray

Page({

data:{

imgArray:['https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1771329155,1268478148&fm=206&gp=0.jpg',

'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490269615418&di=e0ab48f7c68c3c50e4ef91a719bbda9b&imgtype=0&src=http%3A%2F%2Fbbs.crsky.com%2F1236983883%2FMon_1209%2F25_187069_eaac13adbd074a5.jpg',

'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490269615417&di=ef7d8abc8c206aa7edc2042a122e6d1c&imgtype=0&src=http%3A%2F%2Fimg2.3lian.com%2F2014%2Ff3%2F76%2Fd%2F119.jpg',

'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490269615416&di=9a5d6c7c2ad748711f2ea82f947e9ea1&imgtype=0&src=http%3A%2F%2Fimg2.3lian.com%2F2014%2Ff5%2F152%2Fd%2F48.jpg']

并执行changeCurren方法

changeCurrent:function(){

console.log("我滚动了");

}

运行结果：

页面此时已经发生滚动，显示第一张图片，底部第一个小圆点颜色变亮。当页面滚动的时候控制台回打印出：我滚动了

转载于:https://my.oschina.net/u/2971691/blog/901517

微信小程序的视图容器—swiper相关推荐

微信小程序常用视图容器组件
微信小程序常用视图容器组件 1.组件概述 2.常用的试图容器组件 2.1 view 2.1.1 案例 2.2 scroll-view 2.2.1 案例 2.3 swiper 2.3.1 案例 1.组件 ...
小程序开发.微信小程序.组件.视图容器
小程序开发.微信小程序中的组件.视图容器组件 note:当前本文编辑中- 20220731 jcLee95 的个人博客邮箱 :291148484@163.com CSDN 主页:https://bl ...
微信小程序View视图容器组件
完整微信小程序(Java后端) 技术贴目录清单页面(必看) 微信小程序框架为开发者提供了一系列完备的UI组件,方便开发者快速构建小程序UI界面.借助这些UI组件开发者可以像搭积木一样快速地拼装出一栋房 ...
微信小程序之视图容器（swiper）组件创建轮播图
一.视图容器(Swiper) 1.swiper:滑块视图容器微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swi ...
微信小程序-view(视图容器)
示例 <view class="section"><view class="section__title">flex-direction ...
微信小程序滑块视图容器
效果图如下: 完成以上效果需: wxml部分: <view class="nav"><block wx:for="{{styles}}" wx ...
微信小程序利用scroll-view和swiper实现图片滚动切换
微信小程序利用scroll-view和swiper实现图片滚动切换 <view class="starbox"><view class="starare ...
微信小程序轮播图swiper详细代码介绍
微信小程序自定义swiper 滑块视图容器.其中只可放置swiper-item组件,否则会导致未定义的行为. 先在index.wxml中写 style="background:{{item} ...
微信小程序开发系列二：微信小程序的视图设计
大家如果跟着我第一篇文章微信小程序开发系列一:微信小程序的申请和开发环境的搭建一起动手,那么微信小程序的开发环境一定搭好了.效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用. 这个系列 ...

微信小程序的视图容器—swiper

微信小程序的视图容器—swiper相关推荐

最新文章

热门文章