管理员 自适应轮播图高度
// index.js
// 获取应用实例
const app = getApp()
import {
request
} from '../../request/index.js';
Page({
data: {
apiUrl: '',
Height: [],
bannerList: [],
index:0,
},
onLoad() {
this.setData({
apiUrl: app.globalData.base_url,
})
this.getBanner();
},
getBanner() {
request({
url: app.globalData.base_url + '?m=Index&a=banner',
}).then((res) => {
let data = res.data;
if (data.code == 200) {
this.setData({
bannerList: data.data,
})
}
})
},
// 轮播图高度
imgH: function (e) {
var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度
var imgh = e.detail.height; //图片高度
var imgw = e.detail.width;
var swiperH = winWid * imgh / imgw + "px" //等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度 ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
var list = this.data.Height;
list[e.target.dataset.id] = swiperH;
this.setData({
Height:list,
})
},
change(e) {
let index = e.detail.current;
this.setData({
index:index,
})
}
})
<view class="index">
<!-- banner -->
<view class="banner w100">
<swiper bindchange="change" style="height:{{Height[index]}}">
<swiper-item wx:for="{{bannerList}}" wx:key="key" wx:for-item="item">
<image mode="widthFix" data-id='{{index}}' src="{{apiUrl}}{{item.banner_img}}" bindload="imgH"></image>
</swiper-item>
</swiper>
</view>
</view>
.banner {
width: 100%;
}
.banner image {
width: 100%;
}
免责申明：
1. 本站所有教程、文章或资源分享目的仅供大家学习和交流！
2. 如有无法查看或链接失效，麻烦请报告联系管理员处理！
3. 本站无法保证资源或其时效性，恕不接受任何提问。
4. 在本站下载的源码严禁杜绝任何形式的正式商业用途，请去程序官方购买。 所有资料均来自于网络，版权归原创者所有！本站不提供任何保证，并不承担任何法律责任，如果对您的版权或者利益造成损害，请提供相应的资质证明，我们将于3个工作日内予以删除。
