微信小程序生活便民新闻列表页设计制作开发教程

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

一、wxml页面代码如下：

<import src="../index/HotNewsCell/HotNewsCell.wxml" />

<view>
  <scroll-view class="scroll-view_container selected" scroll-x="true" bindscroll="scroll" style="width: 100%">

    <block wx:for="{{newsTagList}}" wx:for-item="item" wx:key="key">
      <!--<block wx:if="{{currentTabIndex == item.id}}">
        <view class="flex-sub-box-5 active" bindtap="clickOrderTab" data-index="{{item.id}}"> {{item.tagName}}</view>
      </block>
      <block wx:else>
        <view class="flex-sub-box-5" bindtap="clickOrderTab" data-index="{{item.id}}"> {{item.tagName}} </view>
      </block>-->
      <view class="flex-sub-box-5 {{ currentTabIndex == item.id ? 'active' : '' }}" bindtap="clickOrderTab" data-index="{{item.id}}">{{item.tagName}}</view>
    </block>

    <!--<view class="flex-sub-box-5 {{ currentTabIndex == '1' ? 'active' : '' }}" bindtap="clickOrderTab" data-index="1" >aa</view>
      <view class="flex-sub-box-5 {{ currentTabIndex == '2' ? 'active' : '' }}" bindtap="clickOrderTab" data-index="2" >bb</view>
      <view class="flex-sub-box-5 {{ currentTabIndex == '3' ? 'active' : '' }}" bindtap="clickOrderTab" data-index="3" >cc</view>
      <view class="flex-sub-box-5 {{ currentTabIndex == '4' ? 'active' : '' }}" bindtap="clickOrderTab" data-index="4" >dd</view>
      <view class="flex-sub-box-5 {{ currentTabIndex == '5' ? 'active' : '' }}" bindtap="clickOrderTab" data-index="5" >ee</view>
      <view class="flex-sub-box-5 {{ currentTabIndex == '6' ? 'active' : '' }}" bindtap="clickOrderTab" data-index="6" >ff</view>
      <view class="flex-sub-box-5 {{ currentTabIndex == '7' ? 'active' : '' }}" bindtap="clickOrderTab" data-index="7" >gg</view>-->

  </scroll-view>

<block wx:for="{{newsTagList}}" wx:for-item="item" wx:key="key">
  <view class="bianmin-container" hidden="{{currentTabIndex != item.id}}">
    <block wx:for="{{list[item.id]}}" wx:for-item="item" wx:key="key">
      <view class="hotNewsList-container" catchtap="tapHotNewsCell">
        <template is="HotNewsCell" data="{{...item}}"></template>
      </view>
    </block>
  </view>
  </block>
</view>

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

@import "../index/HotNewsCell/HotNewsCell.wxss";

.scroll-view_container {
  white-space: nowrap;
  position: fixed;
  top: 0rpx;
  background-color: white;
  line-height: 60rpx;
  height: 60rpx;
  background: #fff;
  text-align: center;
  border-bottom: 1px solid #d9d9d9;
  font-size: 30rpx;
}

.selected {
  border-bottom: 1px solid #d9d9d9;
  color: black;
}

.selected view {
  border-bottom: 1px solid #d9d9d9;
  color: black;
}

.selected view.active {
  color: #0164a6;
  border-bottom: 4px solid #0164a6;
}

.scroll-view_H {
  white-space: nowrap;
}

.flex-sub-box-5 {
  display: inline-block;
  width: 25%;
  height: 58rpx;
  align-items: center;
}

.bianmin-container {
  flex-direction: column;
  display: flex;
  margin-top: 60rpx;
  height: 100% - 60rpx;
  width: 100%;
}

.hotNewsList-container {
  flex-direction: column;
  display: flex;
}

三、js页面代码如下：

// pages/bianmin/bianmin.js

const config = require('../../config')
var pageNo = new Array();
var dic = new Array();

Page({
  data: {
    currentTabIndex: 1,
    list: [],
    newsTagList: []
  },
  scroll: function (e) {

    // console.log(e)
  },
  clickOrderTab: function (e) {
    //data = {};

    var dataset = e.target.dataset

    this.setData({ currentTabIndex: dataset.index })

    // data['pages'] = 1;
    // data['orderLists'] = [];
    // data['noMore'] = false;
    // if (dataset.goodsType) {
    //   data.currentGoodsType = dataset.goodsType;
    // }

    // this.setData(data);
    // this.getOrderList({ tabIndex: index });
    var index = parseInt(dataset.index)
    if (this.data.list[index]) {
      //有数据
      //nothing
    } else {
      //没有数据
      this.loadNewData(this.data.currentTabIndex);
    }


  },
  /** 跳转要闻详情页面 */
  tapHotNewsCell: function (event) {
    wx.navigateTo({
      url: '../index/HotNewsDetail/HotNewsDetail'
    })
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
    console.log('onLoad')

    //this.setData({ newsTagList : ["本地新闻","工作动态","信息公开","互动交流","招标公告"]})
    this.requestNewsTagData();

    this.loadNewData(this.data.currentTabIndex);

  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
    console.log("页面显示")

    // wx.showToast({
    //   title: '成功123',
    //   icon: 'success',
    //   duration: 1500
    // })
  },

  /** 下拉刷新 */
  loadNewData: function (tabIndex) {
    
    pageNo[tabIndex] = 1;
    this.requestData(tabIndex)

  },

  /** 上拉加载 */
  loadNewData_NextPage: function (tabIndex) {
    
    pageNo[tabIndex] += 1;
    this.requestData(tabIndex);
  },

  requestData: function (tabIndex) {
    var that = this

    wx.request({
      url: config.GET_HOT_NEWS + "?accessToken=",
      data: {
        "system": "02",
        "tagId": tabIndex,
        "accessToken": "",
        "scopeAddressCode": "5304",
        "key": "",
        "systemVersion": "10.1.1",
        "imei": "C75C7019-29FA-4F2B-8311-BAA6F29D1845",
        "currentVersion": "3.1.6",
        "sig": "",
        "pageNo": pageNo[tabIndex].toString(),
        "model": "iPhone 5s (A1457/A1518/A1528/A1530)",
        "pageSize": "20"
      },
      method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      header: { 'content-type': 'application/json' }, // 设置请求的 header
      success: function (res) {
        // success
        if (pageNo[tabIndex] == 1) {
          dic[tabIndex] = res.data.data.list;
          that.setData({ list: dic })

        } else {
          dic[tabIndex] = dic[tabIndex].concat(res.data.data.list);
          that.setData({ list: dic })

        }

        console.log(that.data.list)

      },
      fail: function (res) {
        // fail
        pageNo[tabIndex] -= 1;
      },
      complete: function (res) {
        // complete
        wx.stopPullDownRefresh()
      }
    })

  },
  requestNewsTagData: function () {
    var that = this
    var tempNewsTagList = new Array();
    wx.request({
      url: config.newsTagUrl + "?accessToken=",
      data: {
        "system": "02",
        "imei": "A902EA47-B1B2-452A-96FB-4C7BCCBB149C",
        "currentVersion": "3.1.6",
        "model": "iPhone 6s Plus (A1699)",
        "accessToken": "",
        "systemVersion": "10.3.2",
        "sig": ""
      },
      method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      header: { 'content-type': 'application/json' }, // 设置请求的 header
      success: function (res) {
        // success
        tempNewsTagList = res.data.data.showTagList;
        tempNewsTagList = tempNewsTagList.concat(res.data.data.notShowTagList);

        that.setData({ newsTagList: tempNewsTagList })
        console.log(that.data.newsTagList)

        //初始化每个页面的pageNO
        for (var i = 0; i < tempNewsTagList.count; i++ ){
          var model = tempNewsTagList[i];
          
          pageNo[model[id]] = 1;

        }

      },
      fail: function (res) {
        // fail
      },
      complete: function (res) {
        // complete

      }
    })


  },

  onPullDownRefresh: function () {
    // 页面相关事件处理函数--监听用户下拉动作
    this.loadNewData(this.data.currentTabIndex);

  },
  onReachBottom: function () {
    // 页面上拉触底事件的处理函数
    console.log("onReachBottom")

    this.loadNewData_NextPage(this.data.currentTabIndex)
  }

})

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