WXML源码:
<view class="b1 float">
<view class="head float">
<open-data type="userAvatarUrl"></open-data>
</view>
<view class="name float">
<open-data type="userNickName"></open-data>
</view>
</view>
<block wx:for="{{userListInfo}}">
<view class="b2">
<view class="b3">
<image src="{{item.icon}}"></image> <!--获取列表图标 -->
</view>
<view class="b4">
<view>{{item.text}}</view> <!--列表内容 -->
</view>
<view class="listimage" style='background-image:url(/images/小箭头.png);'></view> <!--获取箭头 -->
</view>
</block>
JS源码:
Page({
data: {
userListInfo:[{
icon:'/images/name.png',
text:'个人资料'
},{
icon:'/images/进度.png',
text: '报错进度'
}, {
icon: '/images/修改密码.png',
text: '修改密码'
}, {
icon: '/images/联系我们.png',
text: '联系我们'
}
]
}
})
效果图:
问题:
我想要的效果就是点击列表里不同的地方能跳转进入不同的页面,属实是小白一只,请教下各位师傅,最近水平进步了一些,十分感谢各位社区的师傅的帮助!
绑定统一个方法,传入不同的参数来实现比较方便吧。比如
bindtap="xxx" data-mark="{{index}}"
xxx里根据mark来执行不同的操作,比如navigateTo到不同的页面
或者直接bindtap="xxx({{index}}"根据index值来确定要执行的操作了
<block wx:for="{{userListInfo}}">
<view class="b2" catchtap="xxx" data-mark="{{index}}">
<view class="b3">
<image src="{{item.icon}}"></image> <!--获取列表图标 -->
</view>
<view class="b4">
<view>{{item.text}}</view> <!--列表内容 -->
</view>
<view class="listimage" style='background-image:url(/images/小箭头.png);'></view> <!--获取箭头 -->
</view>
</block>
js
xxx:function(e){
let mark = e.currentTarget.dataset.mark;
switch(mark){
case "0":
wx.navigateTo({url: 'xxxx/xxx1',});
break;
case "1":
.......
}
}
let mark = e.currentTarget.dataset.mark+"";
试试
然后navigateTo后面的,要去掉试试
对象里面再加一个页面地址
--↓↓👍如果觉得有帮助的话请点个【赞】吧(唏嘘也有小尾巴了,可惜是假的)
加个ID标识
循环里面再加if判断