小程序轮播做点击跳转图片不显示,怎么解决

<!--主页-->

<!--轮播-->

<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 //设置高度

    })

  },

})

  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值