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

先上效果图:

微信小程序图片轮播组件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两个组件制作成可滑动的轮播组件。

DEMO下载

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


您可能感兴趣的文章:微信小程序实现下拉刷新和轮播图效果微信小程序 swiper组件构建轮播图的实例微信小程序实现轮播图效果微信小程序联网请求的轮播图微信小程序实战之轮播图(3)微信小程序实现图片轮播及文件上传微信小程序 轮播图swiper详解及实例(源码下载)微信小程序 swiper组件轮播图详解及实例

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 微信数据
分页:12
转载请注明
本文标题:微信小程序图片轮播组件gallery slider使用方法详解
本站链接:http://www.codesec.net/view/572234.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(41)