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

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

浏览量:3239 时间: 来源:qq_36437172

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

例如:

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

 

小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎