微信小程序图片轮播组件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 相关文章推荐
Ext.MessageBox工具类简介
Dec 10 Javascript
JS中typeof与instanceof之间的区别总结
Nov 14 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
js实现下拉框二级联动
Dec 04 Javascript
vue配置font-awesome5的方法步骤
Jan 27 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
ionic2.0双击返回键退出应用
Sep 17 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
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
关于初学PHP时的知识积累总结
2013/06/07 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
PHP实现执行外部程序的方法详解
2017/08/17 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
2020/01/26 Javascript
JS实现简易计算器
2020/02/14 Javascript
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
简述Python中的面向对象编程的概念
2015/04/27 Python
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
Python查看微信撤回消息代码
2018/06/07 Python
python实现可变变量名方法详解
2019/07/01 Python
python实现从ftp服务器下载文件
2020/03/03 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
大学本科生的个人自我评价
2013/12/09 职场文书
儿童生日会策划方案
2014/05/15 职场文书
消防志愿者活动方案
2014/08/23 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
体检通知范文
2015/04/21 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
详解Js模块化的作用原理和方案
2021/04/29 Javascript
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技