新闻类微信小程序

现在微信小程序应用非常多，这里介绍下新闻类微信小程序

看效果图：

小程序成品预览

实现代码：

.wxml

<template name="order-cell">
  <!--一张图片-->
  <block wx:elif="{{ThumbnailPicS02==''}}">
    <view class="order-cell">
      <block>
        <navigator url="../detail/news-detail?type=1&id={{NewsId}}">
          <view>
            <view class="item-content">
              <view class="content-name">
                <view class='content-ping'>
                  <view>{{Title}}</view>
                  <view class="content-attr">
                    <text class='attr-author-name'>{{AuthorName}}</text>
                    <text class='attr-ping'>{{Date}}</text>
                  </view>
                </view>

                <view class='content-price'>
                  <image class='content-image-single' src='{{ThumbnailPicS}}'></image>
                </view>
              </view>
            </view>
          </view>
        </navigator>
      </block>
    </view>
  </block>
  <!--两张图片-->
  <block wx:elif="{{ThumbnailPicS03==''}}">
    <view class="order-cell">
      <navigator url="../detail/news-detail?type=1&id={{NewsId}}">
        <view>
          <view class="item-content">
            <view class="content-name">
              <text class='content-ping'>{{Title}}</text>
            </view>
            <view class="content-attr clearfix">
              <image class='content-image-couple' src='{{ThumbnailPicS}}'></image>
              <image class='content-image-couple' src='{{ThumbnailPicS02}}'></image>
            </view>
            <view class="content-attr clearfix">
              <text class='attr-author-name'>{{AuthorName}}</text>
              <text class='attr-ping'>{{Date}}</text>
            </view>
          </view>
        </view>
      </navigator>
    </view>
  </block>
  <!--三张图片-->
  <block wx:else>
    <view class="order-cell">
      <navigator url="../detail/news-detail?type=1&id={{NewsId}}">
        <view>
          <view class="item-content">
            <view class="content-name">
              <text class='content-ping'>{{Title}}</text>
            </view>
            <view class="content-attr clearfix">
              <image class='content-image-three' src='{{ThumbnailPicS}}'></image>
              <image class='content-image-three' src='{{ThumbnailPicS02}}'></image>
              <image class='content-image-three' src='{{ThumbnailPicS03}}'></image>
            </view>
            <view class="content-attr clearfix">
              <text class='attr-author-name'>{{AuthorName}}</text>
              <text class='attr-ping'>{{Date}}</text>
            </view>
          </view>
        </view>
      </navigator>
    </view>
  </block>
</template>
<!--菜单  -->
<view class="nav-header">
  <scroll-view scroll-x="true" class='header categories' style="">
    <view style='' wx:for="{{navs}}" class="category {{item.alias==activeNav?'active':''}}" bindtap="changeList" data-alias="{{item.alias}}">{{item.text}}
    </view>
  </scroll-view>
</view>
<scroll-view scroll-y='false' scroll-x="false" class="user" bindscrolltoupper="onPullTopRefresh" bindscrolltolower="onSlipBootom" scroll-into-view="{{toView}}" upper-threshold="10" enable-back-to-top='true'>
  <view class="orders-wrap padind-top80">
    <view class="order-list">
      <block wx:for="{{newsList}}">
        <template is="order-cell" data="{{...item}}"></template>
        <block wx:if="{{index==adPositionIndex}}">
          <view>
            <ad unit-id="adunit-8a02792bfd00b1cb"></ad>
          </view>
        </block>
      </block>
      <block wx:if='{{bottomLoading}}'>
        <view class="loading">数据加载中...</view>
      </block>
    </view>
  </view>
</scroll-view>

.js

var services = require('../../../lib/service')

var activceNumber = 0;
const app = getApp();
Page({
  data: {
    activeNav: '头条',
    navs: [{
      text: '头条',
      alias: '头条'
    }, {
      text: '社会',
      alias: '社会'
    }, {
      text: '国内',
      alias: '国内'
    }, {
      text: '娱乐',
      alias: '娱乐'
    }, {
      text: '体育',
      alias: '体育'
    }, {
      text: '科技',
      alias: '科技'
    }, {
      text: '时尚',
      alias: '时尚'
    }],
    newsList: [], //新闻内容
    //记录每个分类下面获取的记录信息
    // {name:'头条',maxNewsId:'2019-03-09 10：11',minNewsId:'2019-03-09 08：11'}
    newsNavParameter: [],
    //0:加载完成(还有数据)  1:加载中  2:加载完成(没有更多数据了)
    searchLoadingStatus: 0,
    bottomLoading: false,
    wxUserId: 0,
    systemInfo: {}   //系统信息
  },
  onLoad(options) {
    var that = this;
    getApp().getWxLoginInfo(function() {
      var wxUserId = getApp().globalData.UserInfo.WxUserId;

      that.setData({
        wxUserId: wxUserId
      })
      that.loadNewsList(0);
    });

    var newsId = options.newsId;
    if (newsId > 0) {
      wx.navigateTo({
        url: '../detail/detail?newsId=' + newsId
      });
    }

    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          systemInfo: res //windowWidth,windowHeight
        });
      }
    })
  },
  onShow() {
    var that = this;
  },
  //loadType:加载方式  0:上拉(向下追加内容) 1:下拉(向上追加内容)
  loadNewsList: function(loadType) {
    var that = this;

    //上一个网络请求已经结束才能再次请求
    if (that.data.searchLoadingStatus == 0) {
      var bottomLoading = false;
      if (loadType == 0) {
        bottomLoading = true;
      } else {
        wx.showNavigationBarLoading()
      }
      that.setData({
        searchLoadingStatus: 1,
        bottomLoading: bottomLoading
      })
      //debugger;
      var navActive = that.data.activeNav;
      var newNavFilter = that.data.newsNavParameter;
      var navF = newNavFilter.filter(function(item, index) {
        return item.name == navActive;
      });
      //传最大id和最小id
      var cacheMinNewsId = 0;
      var cacheMaxNewsId = 0;
      if (navF != null && navF.length > 0) {
        cacheMinNewsId = navF[0].minNewsId;
        cacheMaxNewsId = navF[0].maxNewsId;
      }
      services.service('/news/list', {
          "Type": navActive,
          "MinNewsId": cacheMinNewsId,
          "MaxNewsId": cacheMaxNewsId
        },
        function(res) {
          var newsList = res.data.Data.List
          //console.log(newsList)
          if (newsList != null) {
            let searchList = [];

            var maxNewsId = cacheMaxNewsId > 0 ? cacheMaxNewsId : newsList[0].NewsId;
            var minNewsId = cacheMinNewsId > 0 ? cacheMinNewsId : newsList[0].NewsId;

            newsList.forEach(function(item, index, array) {
              //debugger;
              //时间差的毫秒数
              item.Date = that.getNewsTime(item.Date);

              var listNewsId = item.NewsId;
              if (listNewsId > maxNewsId) {
                maxNewsId = listNewsId;
              }
              if (listNewsId < minNewsId) {
                minNewsId = listNewsId;
              }
            });
            if (loadType == 1) {
              searchList = newsList.concat(that.data.newsList);
            } else {
              searchList = that.data.newsList.concat(newsList);
            }

            that.setData({
              newsList: searchList
            })

            //设置tab加载参数信息
            that.setNewsNavParameter(maxNewsId, minNewsId);
          }
        }, null,
        function() {
          if (loadType == 1) {
            wx.stopPullDownRefresh();
            wx.hideNavigationBarLoading();
          }
          that.setData({
            searchLoadingStatus: 0
          })
        }, false)
    }
  },
  setNewsNavParameter: function(maxNewsId, minNewsId) {
    var that = this;
    var navActive = that.data.activeNav;

    var newNavParameter = that.data.newsNavParameter;
    var navPara = newNavParameter.filter(function(item, index) {
      return item.name != navActive;
    });
    navPara.push({
      name: navActive,
      maxNewsId: maxNewsId,
      minNewsId: minNewsId
    })
    that.setData({
      newsNavParameter: navPara
    });

    console.log(that.data.newsNavParameter);
  },
  getNewsTime: function(articleDate) {
    var currentDate = (new Date());
    var timeSpan = '';

    //时间差的毫秒数
    var date3 = currentDate - new Date(articleDate);
    var days = Math.floor(date3 / (24 * 3600 * 1000));
    if (days > 0) {
      timeSpan = days + '天前';
    } else {
      var leave1 = date3 % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / (3600 * 1000));
      if (hours > 0) {
        timeSpan = hours + '小时前';
      } else {
        var leave2 = leave1 % (3600 * 1000);
        var minutes = Math.floor(leave2 / (60 * 1000))
        timeSpan = minutes + '分钟前';
      }
    }

    return timeSpan;
  },
  // 切换状态
  changeList(e) {
    var that = this;
    var _searchLoadingStatus = that.data.searchLoadingStatus;
    if (_searchLoadingStatus == 0) {
      var alias = e.target.dataset.alias;
      if (alias !== this.data.activeNav) {
        activceNumber = e.target.dataset.alias
        that.setData({
          newsList: [],
          activeNav: e.target.dataset.alias
        });
        that.loadNewsList(0);
      }
    }
  },
  //下拉刷新
  onPullDownRefresh: function() {
    var that = this;
    that.loadNewsList(1);
  },
  // onPullTopRefresh: function () {
  //   wx.stopPullDownRefresh()

  // },
  //滚动到顶部刷新
  onPullTopRefresh: function() {},
  //滚动到最底端触发
  onReachBottom: function(e) {
    var that = this;
    that.onSlipBootom();
  },
  //页面滑动到底部
  onSlipBootom: function() {
    //wx.showNavigationBarLoading();
    var that = this;
    var _searchLoadingStatus = that.data.searchLoadingStatus;
    if (_searchLoadingStatus == 0) {
      that.loadNewsList(0);
      wx.hideNavigationBarLoading();
    }
  },
  getRandomNum(Min, Max) {
    var Range = Max - Min;
    var Rand = Math.random();
    return (Min + Math.round(Rand * Range));
  },
  onShareAppMessage: function(res) {
    var that = this;
    var newsId = that.data.newsId;

    return {
      title: '今日新闻',
      path: '/pages/news/list/list',
      success: function(res) {},
      fail: function(res) {
        // 转发失败
      }
    }
  }
});

.wxss

page {
  height: 100%;
  overflow: auto;
  background-color: #f8f8f8;
}

.categories {
  line-height: 40px;
  white-space: nowrap;
  display: flex;
  border-bottom: 1px solid #f7f7f7;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.categories .category {
  width: 50px;
  text-align: center;
  display: inline-block;
  -webkit-box-flex: 1;
  color: #3f3f3f;
  font-size: 36rpx;
}

.categories .category:last-child {
  border: 0;
}

.category.active {
  color: #ff4520;
  font-weight: bold;
}

.list-info {
  background: #fff;
  height: 57rpx;
  line-height: 57rpx;
  border: 0px solid #f8f8f8;
  font-size: 28rpx;
  padding: 0 20rpx;
}

.list-icon-left {
  float: left;
  height: 57rpx;
  width: 28rpx;
  line-height: 57rpx;
}

.list-icon-wrap {
  float: right;
  height: 57rpx;
  line-height: 57rpx;
}

.list-icon {
  width: 12rpx;
  height: 22rpx;
  margin-top: 20rpx;
  font-size: 26rpx;
}

.arrow-wrap {
  float: right;
  color: #da4866;
  line-height: 80rpx;
  font-size: 28rpx;
  height: 80rpx;
}

.list-arrow {
  width: 13rpx;
  height: 25.78rpx;
  margin: 28rpx 0 0 18.75rpx;
}

.list-text {
  float: left;
  font-size: 28rpx;
  text-indent: 29.29rpx;
  color: #333;
}

.list-text-quit {
  float: left;
  font-size: 24rpx;
  text-indent: 10rpx;
  color: #666;
}

.hide {
  display: none;
}

.orders-wrap {
  font-size: 28rpx;
  height: 100%;
  /*padding-top: 137rpx;*/
}

.padind-top80 {
  padding-top: 80rpx;
  z-index: 100;
}

.padind-top137 {
  padding-top: 137rpx;
}

.orders {
  height: 100%;
}

.nav-header {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 750rpx;
}

.nav-header .header {
  font-size: 26rpx;
  display: -webkit-box;
  text-align: center;
  background: #fff;
  /*padding: 0 16.41rpx;*/
  height: 80rpx;
  line-height: 80rpx;
}

.order-cell {
  background: #fff;
  overflow: hidden;
  border-bottom: 1px solid #eee;
}

.cell-status {
  display: flex;
  align-items: center;
  padding: 10rpx 30rpx;
  color: #333;
  width: 690rpx;
  font-size: 30rpx;
  height: 80rpx;
  border-bottom: 1px dashed #eee;
}

.cell-status text {
  float: left;
  width: 680rpx;
  font-size: 30rpx;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 10rpx;
}

.cell-status image {
  float: right;
  width: 15rpx;
  height: 25rpx;
  display: block;
  margin-top: 10rpx;
}

.cell-item {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

.item-content {
  width: 690rpx;
  position: relative;
  padding: 20rpx 30rpx;
}

.content-name {
  display: flex;
}

.content-name .content-ping {
  float: left;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: #212121;
  width: 680rpx;
  font-size: 38rpx;
}

.content-name .content-price {
  color: #da4866;
  font-size: 36rpx;
}

.content-attr {
  margin-top: 15rpx;
  font-size: 24rpx;
  color:#a8a8a8;
}

.content-attr .attr-ping {
  float: left;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-left: 10rpx;
}

.content-attr .attr-author-name {
  float: left;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.content-image-single{
  width: 255rpx;
  height:140rpx;
}
.content-image-joke{
  width: 140rpx;
  height:140rpx;
}
.content-image-couple{
  margin-left: 10rpx;
  width: 240rpx;
  height:140rpx;
}
.content-image-three{
  margin-left:8rpx;
  width: 32%;
  height:140rpx;
}

.content-attr .attr-play {
  color: #999;
  font-size: 28rpx;
  float: right;
}

.content-attr .attr-play text {
  color: #7ed321;
  font-size: 26rpx;
}

.btn-solid-play {
  background: #2cbc18;
  color: #fff;
  font-size: 27rpx;
}

.order-list {
  padding-bottom: 140rpx;
}

.content-count {
  position: absolute;
  bottom: 0;
  right: 20rpx;
  overflow: hidden;
  width: 100%;
}

.content-amount {
  float: right;
}

.cell-count {
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  overflow: hidden;
  padding: 23.44rpx 18.74rpx;
}

.count-amount {
  float: left;
}

.count-carriage {
  float: right;
}

.count-price {
  float: right;
  margin-left: 28.12rpx;
  color: #ff2b4d;
}

.count-price::before {
  content: "实付：";
  color: #000;
}

.cell-btn {
  padding: 17.58rpx 18.74rpx;
  overflow: hidden;
}

.understand {
  float: left;
  display: flex;
  align-items: center;
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #999;
}

.understand image {
  width: 26rpx;
  height: 26rpx;
  margin-right: 10rpx;
}

.not-btn-order {
  float: right;
  margin-top: 10rpx;
  font-size: 28rpx;
  color: #666;
}

.empty {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 28.12rpx;
  color: #a0a0a0;
  line-height: 48rpx;
}

.empty-img {
  width: 187.49rpx;
  height: 187.49rpx;
  margin-top: 164.05rpx;
  margin-bottom: 23.44rpx;
}

.btn-to-home {
  margin-top: 35.15rpx;
  width: 337.48rpx;
  height: 79.68rpx;
  line-height: 79.68rpx;
  border-radius: 11.72rpx;
  display: inline-block;
}