zoukankan      html  css  js  c++  java
  • 微信小程序轮播图

    微信小程序轮播图一般用swiper组件制作,在文档中是指:滑块视图容器

    它的属性如下:

    eq:

    wxml:

    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
    <swiper-item>
    <image src="{{item}}" class="slide-image" />
    </swiper-item>
    </block>
    </swiper>
    

    wxss:

    swiper {
      height: 400rpx;
       100%;
    }
    swiper-item {
      height: 100%;
       100%;
    }
    .slide-image{
       height: 100%;
       100%;
    }
    

    wxjs:

     data: {
        current: 0,  //当前所在页面的 index
    
        indicatorDots: true, //是否显示面板指示点
    
        autoplay: true, //是否自动切换
    
        interval: 3000, //自动切换时间间隔
    
        duration: 800, //滑动动画时长
    
        circular: true, //是否采用衔接滑动
    
        imgUrls: [
    
          'http://1027145.user-website5.com/yizhan/images-2/banner1.jpg',
    
          'http://1027145.user-website5.com/yizhan/images-2/banner2.jpg',
    
          'http://1027145.user-website5.com/yizhan/images-2/banner3.jpg'
    
        ],
    
        links: [
    
          '/pages/second/register',
    
          '/pages/second/register',
    
          '/pages/second/register'
    
        ]
    
    
    
      },
    
      //轮播图的切换事件
    
      swiperChange: function(e) {
    
        this.setData({
    
          swiperCurrent: e.detail.current
    
        })
    
      },
    
      //点击指示点切换
    
      chuangEvent: function(e) {
    
        this.setData({
    
          swiperCurrent: e.currentTarget.id
    
        })
    
      },
    
      //点击图片触发事件
    
      swipclick: function(e) {
    
        console.log(this.data.swiperCurrent);
    
        wx.switchTab({
    
          url: this.data.links[this.data.swiperCurrent]
    
        })
    
      }

      

      

      

  • 相关阅读:
    CODE[VS] 3026 恶心的扑克
    CODE[VS] 2951 打字比赛
    CODE[VS] 2774 火烧赤壁
    CODE[VS] 1860 最大数 1998年NOIP全国联赛提高组
    matplotlib学习笔记(一)
    LUNA16数据集(二)肺结节可视化
    [转载]pytorch自定义数据集
    [转载]什么情况下应该设置 cudnn.benchmark = True?
    pytorch构建优化器
    pytorch批训练数据构造
  • 原文地址:https://www.cnblogs.com/nature-wind8/p/10647756.html
Copyright © 2011-2022 走看看