微信小程序-自定义四种的轮播图

[复制链接]
hyt_xcx手机认证 实名认证 视频认证 发表于 2017-7-26 14:25:38 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
1.png

2.png

3.png

4.png

  1. <view class="swiper">
  2.   <swiper indicator-dots="{{is_dots}}" autoplay="true" current="{{swiperCurrent}}" interval="5000" duration="600" bindchange="swiperChange">
  3.     <block wx:for="{{img_data}}">
  4.       <swiper-item>
  5.         <image src="{{item.img_url}}" mode="aspectFill"/>
  6.       </swiper-item>
  7.     </block>
  8.   </swiper>
  9.   <view class="dots" wx:if="{{swiper_style == 1}}">
  10.     <block wx:for="{{img_data}}" wx:key="unique">
  11.       <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
  12.     </block>
  13.   </view>
  14.   <view class="dots_two" wx:if="{{swiper_style == 2}}">
  15.     <block wx:for="{{img_data}}" wx:key="unique">
  16.       <view class="dot{{index == swiperCurrent ? ' active' : ''}}">{{index+1}}</view>
  17.     </block>
  18.   </view>
  19.   <view class="dots_three" wx:if="{{swiper_style == 3}}">
  20.       <view class="dot">{{swiperCurrent+1}}/{{swiper_data_num}}</view>
  21.   </view>
  22.   <view class="dots_four" wx:if="{{swiper_style == 4}}">
  23.     <block wx:for="{{img_data}}" wx:for-item="ditem">
  24.       <view class="dot" wx:if="{{index==swiperCurrent}}">{{ditem.title}}</view>
  25.     </block>
  26.   </view>
  27. </view>

  28. <view class="container">
  29.     <button type="primary" bindtap="chang_swiper_style" id="1">轮播图效果一(颜色)</button>
  30.     <button type="primary" bindtap="chang_swiper_style" id="2">轮播图效果二(数字)</button>
  31.     <button type="primary" bindtap="chang_swiper_style" id="3">轮播图效果三(数字二)</button>
  32.     <button type="primary" bindtap="chang_swiper_style" id="4">轮播图效果四(标题)</button>
  33. </view>
复制代码


请点击此处下载

查看状态:需购买或无权限

您的用户组是:游客

文件名称:微信小程序-自定义四种的轮播图.zip 
下载次数:0  文件大小:36.96 KB 
下载权限: 不限 以上或 荣誉会员   [赞助会员]   [充值浩币]


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

专注源码分享,教程分享
全国服务电话

187-8198-7163

周一至周8:00-22:00

反馈建议

cdhaoyt@163.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.2© 2001-2013 Comsenz Inc.( 蜀ICP备16032957号-1