用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

2

主题

14

帖子

166

积分

架构狮

Rank: 3Rank: 3

积分
166
2017-7-18 10:37:39 hongxindada开发者认证 架构狮 楼主 891335
微信小程序自定义轮播图,效果跟pc的轮播图一样.共4种常用效果.

效果一(颜色效果):
QQ截图20170718103026.png


效果二(数字效果):

QQ截图20170718103043.png
效果三(数字效果):

QQ截图20170718103053.png

效果四(标题效果):
QQ截图20170718103106.png

xml代码:
[HTML] 纯文本查看 复制代码
<view class="swiper">
  <swiper indicator-dots="{{is_dots}}" autoplay="true" current="{{swiperCurrent}}" interval="5000" duration="600" bindchange="swiperChange">
    <block wx:for="{{img_data}}">
      <swiper-item>
        <image src="{{item.img_url}}" mode="aspectFill"/>
      </swiper-item>
    </block>
  </swiper>
  <view class="dots" wx:if="{{swiper_style == 1}}">
    <block wx:for="{{img_data}}" wx:key="unique">
      <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
    </block>
  </view>
  <view class="dots_two" wx:if="{{swiper_style == 2}}">
    <block wx:for="{{img_data}}" wx:key="unique">
      <view class="dot{{index == swiperCurrent ? ' active' : ''}}">{{index+1}}</view>
    </block>
  </view>
  <view class="dots_three" wx:if="{{swiper_style == 3}}">
      <view class="dot">{{swiperCurrent+1}}/{{swiper_data_num}}</view>
  </view>
  <view class="dots_four" wx:if="{{swiper_style == 4}}">
    <block wx:for="{{img_data}}" wx:for-item="ditem">
      <view class="dot" wx:if="{{index==swiperCurrent}}">{{ditem.title}}</view>
    </block>
  </view>
</view>

<view class="container">
    <button type="primary" bindtap="chang_swiper_style" id="1">轮播图效果一(颜色)</button>
    <button type="primary" bindtap="chang_swiper_style" id="2">轮播图效果二(数字)</button>
    <button type="primary" bindtap="chang_swiper_style" id="3">轮播图效果三(数字二)</button>
    <button type="primary" bindtap="chang_swiper_style" id="4">轮播图效果四(标题)</button>
</view>


JS代码:

[Actionscript3] 纯文本查看 复制代码
var app = getApp();
Page({
    data: {
        img_data:[
            {
                "title":"图片一",
                "img_url":"https://img.alicdn.com/simba/img/TB1B1uBRVXXXXcCaXXXSutbFXXX.jpg",
            },
            {
                "title": "图片二",
                "img_url": "https://img.alicdn.com/simba/img/TB19IBHQVXXXXaQXXXXSutbFXXX.jpg"
            },
            {
                "title": "图片三",
                "img_url": "https://img.alicdn.com/tfs/TB134OnRVXXXXabXXXXXXXXXXXX-520-280.jpg"
            },
            {
                "title": "图片四",
                "img_url": "https://img.alicdn.com/simba/img/TB1gctlRpXXXXcmXpXXSutbFXXX.jpg"
            },
            {
                "title": "图片五",
                "img_url": "https://img.alicdn.com/tfs/TB1CyKfRVXXXXbqXXXXXXXXXXXX-520-280.jpg"
            }
        ],
        is_dots:true,
        swiper_data_num:0,
        swiperCurrent: 0,
        swiper_style:1
    },
    onLoad:function(){
        this.setData({ swiper_data_num: this.data.img_data.length});
    },
    swiperChange: function (e) {
        this.setData({swiperCurrent: e.detail.current});
    },
    //改变轮播图样式
    chang_swiper_style:function(e){
        var s_id = e.currentTarget.id;
        if (s_id == 2 || s_id == 3 || s_id == 4){
            this.setData({ is_dots: false });
        } else if (s_id == 1){
            this.setData({ is_dots: true });
        }
        this.setData({ swiper_style: s_id});
    }
})

游客,如果您要查看本帖隐藏内容请回复

学习学习
整理的效果不错
我就看看
1
66666666
123445656
先赞一下
来学习下
看看
ttps://github.com/kevenfeng/html-to-wxml.gitttps://github.com/kevenfeng/html-to-wxml.gitttps://github.com/kevenfeng/html-to-wxml.gitttps://github.com/kevenfeng/html-to-wxml.gitttps://github.com/kevenfeng/html-to-wxml.git
不错不错
正需要
学习学习
发新帖
您需要登录后才可以回帖 登录 | 立即注册