微信小程序

小程序幻灯片组件 swiper

日期:2020-01-28 阅读:226

dmandwp系统 - wordpress系统和DM系统区块建站>>

通过数组做swiper:
https://blog.csdn.net/allein_STR/article/details/94348003
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

-----------------

Page({
  data: {
    motto: 'Hello World22', 
sliderarr:['../../images/logo.jpg','../../images/logo2.jpg','../../images/logo3.jpg'], 

sliderarr2:[{id:1,img:'../../images/logo.jpg'},
   {id:2,img:'../../images/logo2.jpg'},
    {id:3,img:'../../images/logo3.jpg'}
    ],


indicatorDots:true,
    autoplay:true,
    interval:3000,
    duration:500,
    object: {
      text: 'init data'
    } 

  },
 

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval = "{{interval}}" duration="{{duration}}"
 style='height:200px;width:100%'>
  <block wx:for="{{sliderarr}}">
    <swiper-item>
       <image src = "{{item}}" class = "slide-image"/>
    </swiper-item>
  </block>
</swiper>

 

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval = "{{interval}}" duration="{{duration}}"
 style='height:200px;width:100%'>
  <block wx:for="{{sliderarr2}}" wx:for-item="NumList">
    <swiper-item>
       <image src = "{{NumList.img}}" class = "slide-image"/>
       <text>{{NumList.id}}</text>
    </swiper-item>
  </block>
</swiper>

 

 

二维数组:

https://blog.csdn.net/HaiJun_Aion/article/details/88431093

 

 

<<点击返回