小程序个人中心页面，模块入口搭建

admin管理员组

文章数量:1530842

通常我们的个人中心页面，都具备有其他模块的入口方式。入口方式主要有以下两种：

例如：

将小程序的跳转页面的链接，放入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>
  </view>

JS:

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'
      }
    ]

本文标签： 模块入口页面程序中心