微信小程序快递行业新闻文字列表页设计制作开发教程

本文给大家带来的是微信小程序快递行业新闻文字列表页设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<!--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>

二、wxss样式文件代码如下：

/* 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);
}

三、js页面代码如下：

// 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',
    })
  },
})

模板简介：该模板名称为【微信小程序快递行业新闻文字列表页设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。