微信小程序点击列表的item跳转界面,url无规律的跳转方法

首先在js文件里写点击事件函数:

clickIndex:function(e){
    var index = e.currentTarget.dataset.index;
    wx.navigateTo({
      url:this.data.category[index].url
    })
  },

wx.navigateTo就是跳转的页面,由于我跳转的页面url没有规律,所以直接在原data里加了一个url值。直接this.data.category[index].url获取。
在这里插入图片描述

然后在wxml文件里:
我将点击事件加入image标签,点击图片就能跳转到对应界面。bindtap=“clickIndex"就是在js里设置的点击事件名称,data-index就是会传入一个参数,叫index,然后{{index}}是和第二行的wx:for=”{{category}}"一起使用的,先wx:for渲染列表,然后index就能获取下标。

<view class="category">
  <view class="categoryitem" wx:for="{{category}}">
    <view class="categoryview">
      <image class="categoryimg" src="{{item.pic}}" bindtap="clickIndex" data-index="{{index}}"></image>
    </view>
    <view class="word">{{item.word}}</view>
  </view>
</view>
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值