<!--主页-->
<!--轮播-->
<view class="image_swiper">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" circular="{{circular}}" duration="{{duration}}" style='height:{{Height}}'>
<block wx:for="{{images_list}}" wx:key="id">
<navigator url="{{item.link}}" open-type="switchTab"> <!--点击跳转-->
<swiper-item>
<image v-for="(item, index) in imgArr" :key="index" src="{{item.path}}" class="slide-image" mode="widthFix" bindload='imgHeight'/>
</swiper-item>
</navigator>
</block>
</swiper>
</view>
Page({
/**
* 页面的初始数据
*/
data: {
<!--图片数组-->
images_list:[
{
"id":1,
"imag_url":"/icons/s.jpg",
"link":"../list/list"
},
{
"id":2,
"imag_url":"/icons/s1.jpg",
"link":"../logs/logs"
},
{
"id":3,
"imag_url":"/icons/s2.jpg",
"link":"../logs/logs"
},
{
"id":4,
"imag_url":"/icons/s3.jpg",
"link":"../other/other"
}
],
bindViewTap() {
wx.navigateTo({
url: '../logs/logs',
})
},
images: [
'/icons/s.jpg',
'/icons/s1.jpg',
'/icons/s2.jpg',
'/icons/s3.jpg'
],
indicatorDots: true, //是否显示面板指示点
autoplay: true, //是否自动切换
interval: 3000, //自动切换时间间隔
circular: true, //是否采用衔接滑动
duration: 500, //滑动动画时长
Height: "", //这是swiper要动态设置的高度属性
},
//设置图片轮显高度
imgHeight: function (e) {
var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度
var imgh = e.detail.height; //图片高度
var imgw = e.detail.width; //图片宽度
var h = 30;
//等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度 ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
var swiperHeight = (winWid * imgh / imgw) + "px";
this.setData({
Height: swiperHeight //设置高度
})
},
})