(1)数据操作限制补充
(2)页面栈
(3)API页面跳转
wx.navigateTo
wx.navigateBack
wx.redirectTo
wx.switchTab
wx.reLaunch
页面栈
就相当于下面这个图 ↓
“mine我的”页面代码案例:
<!--pages/mine/mine.wxml-->
<text>pages/mine/mine.wxml</text>
<view class="mineArea">
<block wx:for="{
{mineArray}}" wx:key="index">
<view class="mineList" bindtap="{
{item.fn}}">
<image src="{
{item.imgSrc}}"></image>
<text>{
{item.info}}</text>
<view></view>
</view>
</block>
</view>
/**
* 页面的初始数据
*/
data: {
mineArray:[
{imgSrc:"/images/icons/order.png",info:"公司信息",fn:"aboutFn"},
{imgSrc: "/images/icons/order.png", info: "新闻列表",fn:"newsFn" },
]
},
aboutFn(){
wx.redirectTo({
url: 'about/about',
})
},
newsFn(){
wx.navigateTo({
url: 'news/news',
})
},
}
.mineArea{
width: 100%;
height:auto;
}
.mineList{
display: flex;
align-items: center;
height: 85rpx;
border-bottom: 1px solid pink;
}
.mineList text{
flex-grow: 1;
}
.mineList image{
width: 50rpx;
height: 50rpx;
margin: 0 16rpx;
}
.mineList view{
width: 50rpx;
height: 56rpx;
margin-right: 20rpx;
color: #333;
position: relative
}
.mineList view::after{
content:'';
display: inline-block;
width: 18rpx;
height: 18rpx;
position: absolute;
top: 18rpx;
left: 0;
border:3rpx solid #d9d9d9;
border-top: transparent;
border-left: transparent;
transform: rotate(-45deg);
}