微信小程序图片轮播组件gallery slider使用方法详解


Posted in Javascript onJanuary 31, 2018

本文实例为大家分享了微信小程序图片轮播组件的具体代码,供大家参考,具体内容如下

先上效果图:

微信小程序图片轮播组件gallery slider使用方法详解

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//滑动动画时长
}

最终效果:

微信小程序图片轮播组件gallery slider使用方法详解

总结:

1. scroll-view组件的作用是可以触发触摸滑动
2. swiper组件的作用是制作图片自动切换,形成轮播
3. navigator组件的作用是给每个图片添加链接
主要是scroll-view和swiper两个组件制作成可滑动的轮播组件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
Oct 11 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 Javascript
layui获取多选框中的值方法
Aug 15 Javascript
js使用cookie实现记住用户名功能示例
Jun 13 Javascript
js模拟实现烟花特效
Mar 10 Javascript
微信小程序scroll-view组件实现滚动动画
Jan 31 #Javascript
微信小程序实现全国机场索引列表
Jan 31 #Javascript
微信小程序radio组件使用详解
Jan 31 #Javascript
微信小程序checkbox组件使用详解
Jan 31 #Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 #Javascript
浅析Angular19 自定义表单控件
Jan 31 #Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 #Javascript
You might like
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
Python制作豆瓣图片的爬虫
2017/12/28 Python
python装饰器深入学习
2018/04/06 Python
python删除不需要的python文件方法
2018/04/24 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
python破解同事的压缩包密码
2020/10/14 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
公关关系专员的自我评价分享
2013/11/20 职场文书
2014感恩节演讲稿大全
2014/10/11 职场文书
2015年服务员工作总结
2015/04/08 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书