百度小程序-swiper組件

.swan

        <!-- 輪播圖S -->
        <view class="swiper-box">
            <swiper class="banner" style='height:{{swiperH}}' bindchange="swiperChange" autoplay="true" interval="3000" duration="500"
             circular="true">
                <block s-for="banner" s-for-index="index" s-for-item="item">
                    <swiper-item>
                        <image src="{{item.cover_id}}" class="slide-image" mode="widthFix" bindload='imgHeight' />
                    </swiper-item>
                </block>
            </swiper>
            <view class="dots">
                <block s-for="banner" s-for-index="index" s-for-item="item">
                    <view class="dot {{index == swiperCurrent  ? 'active' : ''}}"></view>
                </block>
            </view>
        </view>
        <!-- 輪播圖E -->

.css

/* 輪播圖 S*/
.slide-image{width: 100%;}
/* 圓點樣式控制 S*/
.swiper-box{position: relative; width: 100%;}
.dots{position: absolute; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 10rpx 0; background: rgba(0, 0, 0, .2)}
.dots .dot{margin: 0 8rpx; width: 14rpx; height: 14rpx; background: rgba(255,255,255,.8); border-radius: 8rpx; -webkit-transition: all .6s; transition: all .6s;}
.dots .dot.active{width: 40rpx; background: #ef782c;}
/* 圓點樣式控制 E*/
/* 輪播圖 E*/

.js

 1 const app = getApp();
 2 Page({
 3     data: {
 4         banner: [],//輪播圖
 5         swiperCurrent: "",//輪播圖圓點
 6         swiperH: "",  //這是swiper框要動態設置的高度屬性
 7     },
 8     onLoad: function () {
 9         // 監聽頁面加載的生命週期函數
10         this.getBanner();
11     },
12     onReady: function() {
13         // 監聽頁面初次渲染完成的生命週期函數
14     },
15     onShow: function() {
16         // 監聽頁面顯示的生命週期函數
17         app.setInfo();
18     },
19     onHide: function() {
20         // 監聽頁面隱藏的生命週期函數
21     },
22     onUnload: function() {
23         // 監聽頁面卸載的生命週期函數
24     },
25     onPullDownRefresh: function() {
26         // 監聽用戶下拉動做
27     },
28     onReachBottom: function() {
29         // 頁面上拉觸底事件的處理函數
30     },
31     onShareAppMessage: function () {
32         // 用戶點擊右上角轉發
33     },
34     swiperChange: function (e) {
35         this.setData({
36             swiperCurrent: e.detail.current   //獲取當前輪播圖片的下標
37         })
38     },
39     imgHeight: function (e) {
40         var winWid = swan.getSystemInfoSync().screenWidth;
41         var imgh = e.detail.height;//圖片高度
42         var imgw = e.detail.width;//圖片寬度
43         var swiperH = winWid * imgh / imgw + "px";
44         //等比設置swiper的高度。 即 屏幕寬度 / swiper高度 = 圖片寬度 / 圖片高度  ==》swiper高度 = 屏幕寬度 * 圖片高度 / 圖片寬度
45         this.setData({
46             swiperH: swiperH//設置高度
47         });
48     },
49     getBanner: function () {//獲取banner輪播圖
50         var that = this;
51         swan.request({
52             url: app.globalData.baseUrl + 'list/banner',
53             method: 'GET',
54             header: {
55                 genToken: app.globalData.genToken,
56             },
57             success: function (res) {
58                 // console.log(res);
59                 that.setData({
60                     banner: res.data.lines
61                 })
62                 // console.log(that.data.banner)
63             }
64         });
65     }
66 });

 效果圖