通常我们的个人中心页面,都具备有其他模块的入口方式。入口方式主要有以下两种:
例如:
将小程序的跳转页面的链接,放入JS中的 data 数据。wxml中通过使用wx:for 实现入口模块跳转问题。
HTML:
view class='service' view class='service-title'我的服务/view view class='icons' block wx:for="{{list}}" wx:key="{{index}}" view class='user-item' bindtap='toMyMore' data-url='{{item.url}}' button open-type="{{item.url}}" class='button' image src='{{item.img}}' class='list-icon'/image view class='list-title'{{item.title}}/view /button /view /block /view /viewJS:
toMyMore(event){ let url = event.currentTarget.dataset.url if(url){ wx.navigateTo({ url: url, }) } else { wx.showModal({ title: '提示', content: '功能还在开发中....', }) } },CSS:
.order-icon { width: 50rpx; height: 50rpx; margin-right: 20rpx; border-radius: 50%; vertical-align: middle;}.order-title { font-size: 28rpx; width: 100%; vertical-align: middle;}.list-icon { width: 50rpx; height: 50rpx; border-radius: 50%;}.list-title { font-size: 28rpx; width: 100%; margin-top: 8rpx;}.all-order { color: #999; font-size: 28rpx;}.order { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: calc(100% - 20rpx); height: 94rpx; line-height: 94rpx; padding: 0 20rpx; margin: 10rpx; box-sizing: border-box; border-radius: 6rpx; background-color: #fff;}.service { width: calc(100% - 20rpx); margin: 10rpx; background-color: #fff;}.service-title { width: 100%; height: 82rpx; line-height: 82rpx; padding: 0 20rpx; box-sizing: border-box; color: #333; font-size: 32rpx; border-bottom: 1rpx solid rgba(153, 153, 153, 0.2);}.service .icons { display: inline-flex; flex-direction: row; /* 自动换行 */ flex-wrap: wrap; width: 100%;}.service .icons .user-item { width: 25%; height: 156rpx; padding-top: 24rpx; text-align: center; border-bottom: 1rpx solid rgba(153, 153, 153, 0.2);}.button { border: none; outline: none; background: transparent; margin: 0; padding: 0; line-height: 44rpx; padding-bottom: 46rpx;}.button::after { border: none;}JS:
list: [ { img: '../../images/mine/sunburn@2x.png', title: '晒单', url: '../sunburn/sunburn' }, { img: '../../images/mine/address@2x.png', title: '地址管理', url: '../address/address' }, { img: '../../images/mine/wardrobe@2x.png', title: '衣橱', url: '../wardrobe/wardrobe' }, { img: '../../images/mine/coupons@2x.png', title: '优惠券', url: '', }, { img: '../../images/mine/service@2x.png', title: '客服', url: 'contact' }, { img: '../../images/mine/feedback@2x.png', title: '意见反馈', url: 'feedback' } ]小程序













