微信小程序----gallery slider(图片轮播)组件
来源:互联网 发布:飞哥软件 编辑:程序博客网 时间:2024/06/06 01:49
先上效果图:
wxml
<scroll-view scroll-y="true" style="height:200px" class="page-body" bindscrolltolower="loadMore"> <view class="swiper"> <swiper class="swiper-box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="#fff" indicator-active-color="red"> <block wx:for-items="{{banner_url}}" wx:key="item.id"> <navigator url="../blogList/blogList"> <swiper-item> <block wx:if="{{item}}"> <image class="imgw" src="{{item.url}}" mode="aspectFill"/> </block> <block wx:else> <image src="../../images/default_pic.png" mode="aspectFill"></image> </block> </swiper-item> </navigator> </block> </swiper> </view></scroll-view>
wxss
.imgw{width:100%;}
js
/** *页面的初始数据 */data: { banner_url: data.bannerList(), open: false, indicatorDots: true,//是否显示面板指示点 autoplay: true,//是否开启自动切换 interval: 3000,//自动切换时间间隔 duration: 500//滑动动画时长}
最终效果:
总结:
1. scroll-view组件的作用是可以触发触摸滑动
2. swiper组件的作用是制作图片自动切换,形成轮播
3. navigator组件的作用是给每个图片添加链接
主要是scroll-view和swiper两个组件制作成可滑动的轮播组件。
DEMO下载
更多微信小程序实例请点击:http://blog.csdn.net/m0_38082783/article/details/78853722
阅读全文
0 0
- 微信小程序----gallery slider(图片轮播)组件
- Gallery图片轮播
- mui slider轮播组件常用API
- Javascript自定义插件slider使用(首页图片轮播)
- 一个图片轮播插件---Nivo Slider
- 微信小程序----组件之slider
- 微信小程序把玩(二十)slider组件
- 微信小程序图片轮播
- android 图片轮播com.daimajia.slider.library.SliderLayout注意事项
- 【AmazeUI】图片轮播组件
- Android图片轮播组件
- Swift - 图片循环轮播组件的实现(附样例)
- 【Bootstrap】图片轮播组件Carousel
- CSS图片轮播组件布局方案
- android自定义 图片轮播组件
- yii2 实现图片轮播组件
- JavaScript实现图片轮播组件
- Unity之图片轮播组件实现
- NLP基础-BOW-影评分类
- 超大数减1
- spring boot 学习笔记(05)——热部署 之spring-boot-devtools
- scrapy 一次性提取多层嵌套标签的所有文本
- WechatWeb js方法
- 微信小程序----gallery slider(图片轮播)组件
- 编译bib文件,报错repeated entry
- [javase]二分法查找
- jQuery选择器
- Android 快速开发系列 打造万能的ListView GridView 适配器
- 上拉刷新下拉加载
- Android中Dialog、Snackbar、Toast使用区别?
- 7.24亿手机网民面临着怎样的移动应用安全风险
- eclipse中使用Jetty插件实现https请求与SSL双向验证