<!--mine.wxml-->
<import src="cell/cell-template.wxml" />
<view class="mine-container">
<view class="info-container" catchtap="login">
<image class="info-img" src="/images/icon.png"></image>
<text class="info-text">点击登录</text>
</view>
<view class="section-container" wx:for="{{datas}}" wx:for-item="data">
<view class="main-container" wx:for="{{data}}">
<template is="mine" data="{{...item}}"></template>
</view>
</view>
</view>
|
/* mine.wxss */
@import "cell/cell-template.wxss";
page{
height: 100%;
}
.mine-container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding: 0rpx;
background-color: #eee;
}
.info-container{
height: 160rpx;
width: 100%;
margin-bottom: 20rpx;
background-color: #fff;
display: flex;
flex-direction: row;
align-items: center;
}
.info-img{
height: 80rpx;
width: 80rpx;
margin: 10rpx;
border-radius: 40rpx;
}
.info-text{
color: #FB7C58;
font-size: 30rpx;
margin-left: 40rpx;
}
.section-container{
width: 100%;
margin-bottom: 20rpx;
}
.main-container{
width: 100%;
}
|
// mine.js
Page({
/**
* 页面的初始数据
*/
data: {
datas: [
[
{ "name": "我的会员" },
{ "name": "我的收藏" },
{ "name": "推送记录" },
{ "name": "最新活动" }
],
[
{ "name": "版本更新" },
{ "name": "清空缓存" },
{ "name": "夜间模式" }
],
[
{ "name": "使用帮助" },
{ "name": "关于我们" }
]
]
},
login: function (event) {
console.log(event);
wx.navigateTo({
url: 'login/login',
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
|
模板简介：该模板名称为【微信小程序书城我的会员中心红色风格样式设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
