要实现的效果:
先来看一下小程序的路由方式
navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
调用页面路由带的参数可以在目标页面的onLoad中获取。
wxml:
<block wx:for="{{myimg}}" wx:key>
<navigator bindtap='goto' data-index="{{index}}" class='meun2' url='{{item.url}}'><image src='{{item.img}}' class='my-img'></image><view class='my-name'>{{item.name}}</view></navigator>
</block>
JS:
// pages/my/my.js
Page({
/**
* 页面的初始数据
*/
data: {
myimg:[
{
"img":'/images/my_icon_order@2x.png',
"name":"我的订单",
"url":"/pages/order/order"
},
{
"img": '/images/my_icon_integral@2x.png',
"name": "我的积分",
"url":"/pages/my/integral"
},
{
"img": '/images/my_icon_distribution@2x.png',
"name": "我的分销",
"url": "/pages/my/my-sales"
},
{
"img": '/images/my_icon_activity@2x.png',
"name": "我的活动",
"url": "/pages/index/activity"
},
{
"img": '/images/my_icon_address@2x.png',
"name": "地址管理",
"url": "/pages/order/shop-addr"
},
{
"img": '/images/my_icon_property@2x.png',
"name": "物业管理",
"url": "/pages/index/activity"
},
{
"img": '/images/my_icon_our@2x.png',
"name": "关于我们",
"url": "/pages/my/aboutme"
},
{
"img": '/images/my_icon_service@2x.png',
"name": "联系我们"
},
{
"img": '/images/my_icon_Flicking@2x.png',
"name": "核销订单"
},
]
},
goto:function(e){
var index = e.currentTarget.dataset.index
if (index == 0)
{
wx.switchTab({
url: '/pages/order/order',
})
}
}
})