用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    无聊
    2017-8-15 16:38
  • 签到天数: 42 天

    [LV.5]常住居民I

    839

    主题

    2005

    帖子

    2万

    金钱

    管理员

    论坛管理员

    Rank: 9Rank: 9Rank: 9

    积分
    0

    突出贡献优秀版主荣誉管理论坛元老

    QQ
    2017-8-30 14:01:14 zhichi_admin 管理员 楼主 21048
    此功能视频教程请点击链接http://school.jisuapp.cn/courses/143-14.html

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


    效果二(数字效果):

    效果三(数字效果):

    效果四(标题效果):


    xml代码:
    [AppleScript] 纯文本查看 复制代码
    <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代码:
    [AppleScript] 纯文本查看 复制代码
    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});
        }
    })


    项目下载:
    游客,如果您要查看本帖隐藏内容请回复

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    使用道具 举报 回复
    谢谢分享资源
    谢谢分享资源
    发新帖
    *滑动验证:
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X