本文给大家带来的是微信小程序系统通知文字列表页设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--messageAccount.wxml-->
<view class="in">
<view class="left">
<text class="left-in">系统通知</text>
</view>
<view class="right">
<text class="right-in">投诉建议</text>
</view>
</view>
<view class="record">
<view class="on">
<text class="action">订单即将关闭</text>
<text class="money">></text>
</view>
<view class="hr"></view>
<view class="shortintro">
您有一笔订单即将关闭，再不付款宝贝就没啦，快去看看吧~
</view>
<view class="under">
<text class="time">2017-04-15 14:20</text>
</view>
</view>
<view class="record">
<view class="on">
<text class="action">下单失败</text>
<text class="money">></text>
</view>
<view class="hr"></view>
<view class="shortintro">
抱歉，您的订单（020024646164)，因为当前库存不足，交易失败，请您稍后再试。刚学您对非越的厚爱和支持！
</view>
<view class="under">
<text class="time">2017-04-12 11:18</text>
</view>
</view>
<view class="record">
<view class="on">
<text class="action">送您10元新人专享优惠券！</text>
<text class="money">></text>
</view>
<view class="hr"></view>
<view class="shortintro">
新人专享10元优惠券免费领，还有更多惊喜，快来领取吧~
</view>
<view class="under">
<text class="time">2017-04-10 18:22</text>
</view>
</view>
|
二、wxss样式文件代码如下：
.in{
background-color:#ffffff;
display:flex;
justify-content:center;
padding:15px;
margin-bottom:15px;
}
.left{
border-right:1px solid green;
padding-right:20px;
}
.right{
padding-left:20px;
}
.left-in{
color: #f9364f;
}
.right-in{
color: #9a9a9a;
}
.record{
margin-bottom:7px;
background-color:#ffffff;
padding:12px 10px;
}
.under{
margin-top:15px;
}
.action{
color:#353535;
}
.money{
float:right;
color:#999999;
}
.time{
color:#999999;
font-size:13px;
}
.detail{
margin-left:5px;
}
.succerr{
float:right;
color:#999999;
font-size:13px;
}
.tips{
margin-top:20px;
color:#999999;
padding:0 10px;
}
.shortintro{
color:#595959;
}
|
三、js页面代码如下：
// messageAccount.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
|
.jpg)
.jpg)
