<!--announcement.wxml--> <block wx:for="{{announcement}}"> <view class="ann" data-id="{{item.id}}" bindtap="jump"> <text class="ann_title">{{item.title}}</text> <text class="asert">></text> <view class="hr"></view> <view class="ann_body"> {{item.body}}</view> <view class="ann_bottom"> <text class="ann_date">{{item.date}}</text> <text class="ann_admin">{{item.admin}}</text> </view> </view> </block> |
/* announcement.wxss */ .ann{ margin: 10px 2px 0 2px; min-height: 110px; background-color: #ffffff; padding: 20px 10px 5px 10px; } .hr{ width: 100%; height: 1px; margin: 10px 0; background-color: #c7c7c7; } Page { background: #f5f5f5; font-size: 30rpx; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; } .ann_title{ font-size: 20px; } .ann_body{ color: rgba(0, 0,0, .7); } .ann_bottom{ margin:20px 0 10px 0; } .ann_date{ display: inline; float: left; color: rgba(0, 0,0, .5); } .ann_admin{ display: inline; float: right; color: rgba(0, 0,0, .5); } .asert{ font-size: 20px; float: right; color: rgba(0,0,0,.5); } |
// announcement.js Page({ /** * 页面的初始数据 */ data: { announcement:[ {"id":1, "title": "海关严查,违法物品一律拒发!", "body": "刚收到各种快递公司和报关行的最新消息,由于..", "date": "2017-06-20", "admin": "佰客国际" }, { "id":2,"title": "端午节放假通知", "body": "您们好!端午节即将来临,为了方便大家提前安排...", "date": "2017-05-25", "admin": "佰客国际" }, ] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { return { title:"佰客国际", desc: '我发现一个好玩的小程序-【佰客国际】,一起来玩吧', path: '/pages/guide/guide' } }, jump: function (e) { var id = e.currentTarget.dataset.id; wx.redirectTo({ url: '../../pages/announceDetail/announceDetail?id='+id, }) }, formSubmit: function (e) { console.log('传值处理..') wx.redirectTo({ url: '../../pages/mergeTrans/mergeTrans', }) }, }) |
模板简介:该模板名称为【微信小程序快递行业新闻文字列表页设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。