微信小程序自定义轮播图(常用四种效果)

zhichi_admin

此功能视频教程请点击链接：http://school.jisuapp.cn/courses/143-14.html

微信小程序自定义轮播图,效果跟pc的轮播图一样.共4种常用效果.
效果一(颜色效果):


效果二(数字效果):

效果三(数字效果):

效果四(标题效果):


xml代码:
[mw_shl_code=applescript,true]<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>[/mw_shl_code]


JS代码:
[mw_shl_code=applescript,true]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});
    }
})[/mw_shl_code]

项目下载：

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

正义猪手

谢谢分享资源

13337887778

谢谢分享资源

jack56846

我有流量，寻求个人游戏开发者合作，有意者联系微,信,号j i m 2 0 1 8 0 6 8 8