Banner图点击预览
wxml
<!-- banner -->
<view class='home-banner'>
<swiper indicator-dots='true' autoplay='{{flag?true:false}}' interval='4000' duration='500' circular='true'>
<swiper-item wx:for="{{bannerList}}" wx:key="index">
<image class='home-img' src='{{item.imagePath}}' data-imgPath='{{item.imagePath}}' bindtap='onBannerClick'></image>
</swiper-item>
</swiper>
</view>
js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
bannerList: [],
imgsList: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var that = this
//取得banner
wx.request({
url: "https://www.wanandroid.com/banner/json",
data: {},
method: "GET",
header: {
'content-type': 'application/x-www-form-urlencoded', // 默认值
},
success: (res) =>{
console.log("succ")
that.setData({
bannerList: res.data.data,
})
that.getImagelist();
},
fail: function(error) {
console.log("failedsss");
console.log(error);
},
complete: function(res) {
console.log(res.data)
}
}),
},
getImagelist() {
var that = this;
let imgArray = [];
const lists = that.data.bannerList;
for (var pic in lists) {
imgArray.push(lists[pic].imagePath)
}
that.setData({
imgsList: imgArray
})
},
onBannerClick(e) {
var that = this
const imgLink = e.target.dataset.imgpath
wx.previewImage({
current: imgLink,//当前显示图片的http链接
urls: that.data.imgsList,//需要预览的图片http链接集合
})
}
})
wxss
随意设置banner大小
.home-banner{
width: 700rpx;
height: 300rpx;
}
备注:.js中 e.target.dataset.imgpath中的imgpath与.wxml中 data-imgPath(网址引用玩安卓的资源)