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

小程序 专栏收录该内容
37 篇文章 2 订阅

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

例如:

将小程序的跳转页面的链接,放入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'
      }
    ]

 

  • 1
    点赞
  • 0
    评论
  • 8
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏

qq_36437172

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值