.swan
<!-- 轮播图 S-->
<view class="swiper-box">
<swiper 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 bindtap="previewOriginImage" data-src="{{item.cover_id}}" lazy-load="true" 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="imgUrl">
<view class="dot {{index == swiperCurrent ? 'active' : ''}}"></view>
</block>
</view>
</view>
<!-- 轮播图 E-->
.css
.slide-image{width:100%;display:block}
.swiper-box{position:relative;width:100%;box-sizing:border-box}
.dots{position:absolute;left:;right:;bottom:;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;margin-bottom:40rpx}
.dots .dot{margin:0 8rpx;width:14rpx;height:14rpx;background:rgba(255,255,255,0.8);border-radius:50%;border:solid 1px #0b82f3;-webkit-transition:all 0.6s;transition:all 0.6s;box-sizing:border-box}
.dots .dot.active{background-color:#0b82f3}.js
const app = getApp();
Page({
data: {
banner: [],//轮播图
swiperCurrent: "",//轮播图圆点
swiperH: "", //这是swiper框要动态设置的高度属性
arrimgList:[],//图片画廊数组
},
onLoad: function () {
// 监听页面加载的生命周期函数
this.getBanner();
},
onReady: function() {
// 监听页面初次渲染完成的生命周期函数
},
onShow: function() {
// 监听页面显示的生命周期函数
app.setInfo();
},
onHide: function() {
// 监听页面隐藏的生命周期函数
},
onUnload: function() {
// 监听页面卸载的生命周期函数
},
onPullDownRefresh: function() {
// 监听用户下拉动作
},
onReachBottom: function() {
// 页面上拉触底事件的处理函数
},
onShareAppMessage: function () {
// 用户点击右上角转发
},
swiperChange: function (e) {
this.setData({
swiperCurrent: e.detail.current //获取当前轮播图片的下标
})
},
imgHeight: function (e) {
var winWid = swan.getSystemInfoSync().screenWidth;
var imgh = e.detail.height;//图片高度
var imgw = e.detail.width;//图片宽度
var swiperH = winWid * imgh / imgw + "px";
//等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度 ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
this.setData({
swiperH: swiperH//设置高度
});
// console.log(e.currentTarget.dataset.src);
//推入数组 难点可能在这里,数据推入到一个数组中
this.data.arrimgList.push(e.currentTarget.dataset.src);
// console.log(this.data.arrimgList);
},
getBanner: function () {//获取banner轮播图
var that = this;
swan.request({
url: app.globalData.baseUrl + 'list/banner',
method: 'GET',
header: {
genToken: app.globalData.genToken,
},
success: function (res) {
// console.log(res);
that.setData({
banner: res.data.lines
})
// console.log(that.data.banner)
}
});
},
previewOriginImage(e) {
console.log(e);
swan.previewImage({
current:e.currentTarget.dataset.src,
urls: this.data.arrimgList, // 需要预览的图片http链接列表
});
}
});
效果图