首先在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>