微信小程序网悦新闻开发--首页模块开发（三）

新闻列表

首先给大家展示一下新闻列表页面的效果图

新闻列表使用微信小程序视图容器组件scroll-view开发，根据新闻的类型不同给用户不同的展现方式，以下是对应列表页面wxml的代码.。

<view class="page"  wx:if="{{loading}}">
<myTabBar  width="{{'600px'}}"  bind:tabBarItemTap="tabBarItemTap" data_tabBar_list="{{data_tabBar_list}}" selected_tabBar="{{selected_tabBar}}"></myTabBar>
<myMessageBox messageBoxText="{{messageBoxText}}" wx:if="{{isShowMessageBox}}"></myMessageBox>
<scroll-view 
style="height:{{scrollHeight}}px;"
scroll-y="{{true}}" 
refresher-enabled="{{true}}" 
bindrefresherrefresh="onRefresh" 
refresher-triggered="{{isRefresh}}" 
bindscrolltolower="onReachBottom" 
scrollTop="{{scrollTop}}" >
  <view wx:for="{{data_list}}" wx:for-index="idx" wx:for-item="item">
    <!--封面排版新闻-->
    <view class="list_item_column" data-item="{{item}}" bindtap="listItemTap" wx:if="{{item.skipType =='special'}}">
         <text class="news_title_3">{{item.title}} </text>
         <image class="list_bigger_image" mode="aspectFill" src="{{item.imgsrc}}"></image>
         <view>
            <text class="news_source">{{item.source}} </text>
            <text class="news_replyCount">{{item.commentCount}}跟帖 </text>
          </view>
    </view>
    <!--三联排版新闻-->
    <view class="list_item_column" data-item="{{item}}" bindtap="listItemTap" wx:elif="{{item.imgextra !=undefined}}">
         <text class="news_title_3">{{item.title}} </text>
         <view class="list_item_3_image">
            <image class="list_small_image" mode="aspectFill" src="{{item.imgsrc}}"></image>
            <image class="list_small_image" mode="aspectFill" wx:for="{{item.imgextra}}" wx:for-index="idx_imgextra" wx:for-item="item_imgextra" src="{{item_imgextra.imgsrc}}"></image>
         </view>
         <view>
            <text class="news_source">{{item.source}} </text>
            <text class="news_replyCount">{{item.commentCount}}跟帖 </text>
         </view>
    </view>
    <!--普通排版新闻-->
    <view class="list_item" data-item="{{item}}" bindtap="listItemTap" wx:elif="{{item.imgextra ==undefined}}">
        <view class="list_item_left">
          <text class="news_title">{{item.title}} </text>
          <view>
            <text class="news_source">{{item.source}} </text>
            <text class="news_replyCount">{{item.commentCount}}跟帖 </text>
          </view>
        </view>
        <view class="list_item_right">
          <image class="list_small_image" mode="aspectFill" src="{{item.imgsrc}}"></image>
        </view>
    </view>
  </view>
  <view>
  <myLoading  wx:if="{{nextLoading}}" ></myLoading>
</view>
</scroll-view>
</view>

新闻列表主要用到了scroll-view组件的bindrefresherrefresh、bindscrolltolower实现了列表的上拉刷新和下拉加载的功能。其实要使用上拉刷新还必须把scroll-view组件的refresher-enabled属性置为true，在新闻分类切换的时候希望列表回到顶部可以用到scrollTop属性，以下是对应列表页面js的代码。

Page({
  data: {
      isRefresh:false,
      pageSize: 10,
      page: 0,
      scrollTop: 0,
      loading: false,
      nextLoading: false,
      scrollHeight:0,
      isShowMessageBox: false,
      messageBoxText:'',
      data_list :[],
      data_tabBar_list:[
        {
          name:'新闻',
          url:'https://3g.163.com/touch/reconstruct/article/list/BBM54PGAwangning/'
        },
        {
          name:'娱乐',
          url:'https://3g.163.com/touch/reconstruct/article/list/BA10TA81wangning/'
        }
        //……剩余的新闻分类此处省略……
      ],
      selected_tabBar:{}
  },
  onLoad: function (options) {
    var that = this;
    that.setData({
      selected_tabBar:that.data.data_tabBar_list[0]
    })
    wx.getSystemInfo({
        success:function(res){
            that.setData({
                scrollHeight:res.windowHeight
            })
        }
    })
    wx.request({
      url: this.data.selected_tabBar.url + '0-10.html', 
      data: {},
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {
        that.setData({
          data_list: that.data_transform(res.data),
          loading:true
        })
      }
    })
  },
  onRefresh: function(event) {
    var that = this;
    wx.request({
      url: this.data.selected_tabBar.url + '0-10.html', 
      data: {},
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {
        that.setData({
          data_list: that.data_transform(res.data),
          isRefresh:false,
          page:0,
          isShowMessageBox:true,
          messageBoxText: '成功为您推荐10条新内容'
        })
        setTimeout(function(){
          that.setData({
            isShowMessageBox:false,
            messageBoxText:''
          })
        },1000)
      }
    })
  },
  onReachBottom: function(event) {
    var that = this;
    if(that.data.nextLoading){
      return;
    }
    var newPage =that.data.page+that.data.pageSize;
    var pageName = newPage + "-" + that.data.pageSize + ".html";
    that.setData({
      nextLoading:true
    });
    wx.request({
      url: this.data.selected_tabBar.url + pageName, 
      data: {},
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {
        that.setData({
          page: newPage,
          data_list: that.data.data_list.concat(that.data_transform(res.data)),
          nextLoading:false
        })
      }
    })
  },
  data_transform:function(data){
    var tmp_data = JSON.parse(data.substring(9,data.length-1));
    for (var key in tmp_data)
        if(typeof tmp_data[key] == typeof []) 
        return tmp_data[key];
  },
  tabBarItemTap: function(e) {
    var tabBar ={};
    tabBar.name = e.detail.name;
    tabBar.url = e.detail.url;
    this.setData({
      selected_tabBar:e.detail,
      scrollTop:0
    });
    this.onRefresh();
  },
  listItemTap: function(e) {
    var obj = JSON.stringify(e.currentTarget.dataset.item);
    wx.navigateTo({
      url: '/pages/news/details/index?obj=' + encodeURIComponent(obj), // 进行编码,
    })
  }
})

以下是对应页面wxss的代码。

.list_item{
  display: flex;
  flex-direction: row;
  padding:8px;
  border-bottom: 1px solid #EEF0F4;
}
.list_item_left{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 10px;
}
.list_item_right{
  display: flex;
}
.list_small_image{
  width: 230rpx; 
  height: 170rpx; 
  border: 1px solid #EEF0F4;
}
.list_bigger_image{
  width: 715rpx; 
  height: 420rpx; 
  border: 1px solid #EEF0F4;
}
.list_item_column{
  display: flex;
  flex-direction:column;
  padding:8px;
  border-bottom: 1px solid #EEF0F4;
}
.list_item_3_image{
  display: flex;
  flex-direction:row;
  justify-content: space-between;
}
.news_title_3{
  font-size: 18px;
  margin-bottom: 10px;
}
.news_title{
  font-size: 18px;
}
.news_source{
  font-size: 12px;
  color: #B4B4B4;
}
.news_replyCount{
  margin-left: 4px;
  font-size: 12px;
  color: #B4B4B4;
}

新闻详情

首先给大家展示一下新闻详情页面的效果图

新闻详情使用微信小程序视图容器组件scroll-view开发，提供用户阅读新闻，以下是对应列表页面wxml的代码.。

<view class="page"  wx:if="{{loading}}">
  <scroll-view scroll-y='true'  style="height:100%;" scroll-y="{{true}}" >
    <view class="news_box">
      <text class="news_title">{{model.title}}</text>
      <view class="news_info">
        <text class="news_source">{{model.source}}</text>
        <text class="news_date">{{model.ptime}}</text>
      </view>
      <image class="news_bigger_image" mode="aspectFill" src="{{model.imgsrc}}"></image>
      <text class="news_content">{{model.digest}}</text>
    </view>
  </scroll-view>
</view>

列表页面通过路由可以把信息传到详情页面，在onLoad方法中就可以取到列表传递过来的值然后绑定，以下是对应列表页面js的代码.。

Page({
  data: {
    model:{},
    loading:true,
  },
  onLoad: function (options) {
    var obj =JSON.parse(decodeURIComponent(options.obj))
    this.setData({
      model:obj
    })
  }
})

以下是对应页面wxss的代码。

.news_box{
  display: flex;
  flex-direction: column;
  padding:18px;
}
.news_title{
  font-size: 20px;
  font-weight: bold;
  line-height: 32px;
}
.news_info{
  margin-bottom: 16px;
  margin-top: 16px;
}
.news_source{
  font-size: 12px;
  color: #B4B4B4;
}
.news_date{
  margin-left: 8px;
  font-size: 12px;
  color: #B4B4B4;
}
.news_bigger_image{
  width: 680rpx; 
  height: 420rpx; 
  border: 1px solid #EEF0F4;
}
.news_content{
  margin-top: 8px;
  font-size: 18px;
  line-height: 32px;
}

结束语

这样一个简单首页模块就开发完了，其中里面用到的自定义组件在稍后的章节中会单独拿出来讲解，大家有兴趣的还可以增加点赞评论等功能。