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

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

例如：

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

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

微信小程序个人中心页面开发
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
小程序登录本地服务器,微信小程序实现用户登录模块服务器搭建
我选用的是node.js来搭建服务器,没有安装的小伙伴可以参考我的node.js其他博客. 服务器安装与配置初始化项目,将会自动创建package.json配置文件. npm init -y 安装E ...
微信小程序个人中心页面案例
微信小程序开发,经常会遇到个人中心页面的需求,为了方便大家使用,决定将个人总想页面进行开源,以供大家参考交流. 一.效果预览二.源代码 abouthe.json文件 {"usingCo ...
小程序----个人中心页面
页面效果代码实现: center.wxml页面 <view class="header-container" bindtap="bindcenter"& ...
关于小程序订单中心页设置的公告
为进一步规范小程序交易生态.提升用户购物体验.满足用户在有交易的小程序中便捷查看订单信息的诉求,自2022年12月31日起,对于有"选择商品/服务-下单-支付"功能的小程序,需按照 ...
微信小程序个人中心页下拉回弹效果实现
实现微信小程序个人中心页面的某个区域的下拉回弹效果.例如以下代码代表需要下拉回弹的区域: 给这个区域加上事件:手指触发的时候事件.手指移动的事件.手指松开的事件.同时加上动画的样式. <view ...
微信小程序的十七个流量入口！
一.通过名称做搜索优化小程序与公众号一样,名称具有唯一性,谁先注册,谁先使用,后面的人就无法再使用这个名称的了.并且认证后得到的推荐权重也相对靠前. 因此小程序的注册,越早越好.名称不宜太长,最好是 ...
vue微信小程序开发(二)---页面以及导航
vue微信小程序开发(二)-菜单以及页面这里写目录标题 vue微信小程序开发(二)---菜单以及页面图标的选择创建并注册页面底部导航大家好,我是代码哈士奇,是一名软件学院网络工程的学生, ...
微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...

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

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

最新文章

热门文章