小程序图片轮播自适应

借（抄）鉴（袭）Thor UI 的！！！

 

index.js

 1 Page({
 2   data: {
 3     banner: [
 4       "http://gw.alicdn.com/tfscom/i2/27574552/TB2LLz8ugJkpuFjSszcXXXfsFXa_!!27574552.jpg",
 5       "http://gw.alicdn.com/tfscom/i2/27574552/TB2LLz8ugJkpuFjSszcXXXfsFXa_!!27574552.jpg",
 6       "http://gw.alicdn.com/tfscom/i2/27574552/TB2LLz8ugJkpuFjSszcXXXfsFXa_!!27574552.jpg",
 7       "http://gw.alicdn.com/tfscom/i2/27574552/TB2LLz8ugJkpuFjSszcXXXfsFXa_!!27574552.jpg",
 8       "http://gw.alicdn.com/tfscom/i2/27574552/TB2LLz8ugJkpuFjSszcXXXfsFXa_!!27574552.jpg",
 9       "http://gw.alicdn.com/tfscom/i2/27574552/TB2LLz8ugJkpuFjSszcXXXfsFXa_!!27574552.jpg"
10     ],
11     scrollH: 0, //滚动总高度
12     autoplay: false,//自动播放
13     indicatorDots: true,//提示点
14     circular: true,//是否采用衔接滑动
15     duration: 200
16   },
17   onLoad: function (options) {
18     wx.getSystemInfo({
19       success: (res) => {
20         this.setData({
21           scrollH: res.windowWidth
22         })
23       }
24     })
25   }
26 
27 })

 

index.wxml

1 <view class="tui-banner-swiper">
2   <swiper autoplay="{{autoplay}}" duration="{{duration}}" circular="{{circular}}" indicator-dots="{{indicatorDots}}" style="height:{{scrollH}}px" bindchange="bannerChange">
3     <block wx:for="{{banner}}" wx:key="{{index}}">
4       <swiper-item data-index="{{index}}" catchtap="previewImage">
5         <image src="{{item}}" class="tui-slide-image" style="height:{{scrollH}}px" />
6       </swiper-item>
7     </block> 
8   </swiper>
9 </view>

 

index.wxss

1 .tui-banner-swiper {
2   position: relative;
3 }
4 .tui-slide-image {
5   width: 100%;
6   display: block;
7 }

 

posted @ 2020-04-07 16:40  letleon  阅读(414)  评论(0)  编辑  收藏  举报