微信小程序开发笔记--05

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_39925376/article/details/87858554

列表页面加载更多文章

/* pages/list/list.wxss */
	.loadmore{
	text-align: center;
	margin: 10px;
	color: rgb(126, 124, 124);
	font-size: 16px;}

<!--list.wxml-->
<view bindtap='loadmore' data-lastid="{{lastid}}" class='loadmore'>
加载更多</view>

//list.js
//获取应用实例
const app = getApp()
Page({
	  data: {
	    newslist:[],
	    lastid:0},
	    loadDate: function (lastid) {
		      var limit=2
		      var that=this
		      wx.request({
			        url: 'http://localhost/weicms/index.php?s=/w16/Wxzxy/Wxzxy/getlist',
			        data: {lastid:lastid,limit:limit},
			        header: {
			          'content-type': 'application/json' // 默认值
			        },
			        success:function(res) {
			          var len = res.data.length
			          that.setData({ lastid: res.data[len-1].id })
			
			          var dataArr = that.data.newslist
			          var newdata = dataArr.concat(res.data);
			
			          that.setData({
			            newslist: newdata
			          })}
		      })
	  },
	  loadmore:function(event){
	    var id = event.currentTarget.dataset.lastid
	   this.loadDate(id);
	  },
	  onLoad: function () {
	  console.log("onload")
	  var that=this
	  this.loadDate(0);
}
})

界面反馈提示

//list.js
	Page({
	  data: {
	    newslist: [],
	    lastid: 0,
	    confirmHidden: true,
	    toastHidden: true,
	    isfrist: 1,
	    msg: '没有更多文章了'
	  },
	  loadData: function (lastid) {
		      success: function (res) {
			        if (!res.data) {
			          that.setData({ toastHidden: false })
			          return false
			        }
			        var len = res.data.length
			        if (len != 0) {
			          that.setData({ lastid: res.data[len-1].id })
			        } else {
			          that.setData({ toastHidden: false })
			        }
		        var dataArr = that.data.newslist
		        var newdata = dataArr.concat(res.data);
		        that.setData({ newslist: newdata })
		      }})
		  },
	  loadmore: function (event) {
		    wx.getNetworkType({
		      success: function (res) {
		        var networkType = res.networkType 
		        // 返回网络类型2g，3g，4g，wifi
		        if (networkType != 'wifi' && isfrist == '1') {
		          that.setData({ confirmHidden: false })
		        } }
		    })
		    this.setData({ isfrist: 0 })
		    this.loadData(id);
	  },
	  //消息提示框
	  toastChange: function () {
		    this.setData({ toastHidden: true })
	  },
	  //网络状态模式提示框
	  modalChange: function () {
		    this.setData({ confirmHidden: true })
	  }
	})

<!--list.wxml-->
	<view bindtap='loadmore' data-lastid="{{lastid}}" 
	data-isfrist="{{isfrist}}" class='loadmore'>加载更多</view>
	<toast hidden="{{toastHidden}}" bindchange="toastChange"
	duration="3000">{{msg}}</toast>
	<modal title="温馨提示" no-cancel hidden="{{confirmHidden}}"  
	confirm-text="确定"  bindconfirm="modalChange">你当前不在WIFI网络下，
	会产生流量费用</modal>

设置“加载中“”提示框方法一：

<!--list.wxml-->
	<loading hidden="{{loadHidden}}" bindchange="loadChange">
	    加载中...
	</loading>

//list.js
data: {
	loadHidden: true,}
    loadData: function (lastid) {
	    //显示出加载中的提示
	    this.setData({ loadHidden: false })	
    }

  complete: function () {
        //显示出加载中的提示
        that.setData({ loadHidden: true })
      }

方法二：

//list.js
	wx.showToast({
          title: '加载中',
          icon: 'loading',
          duration: 2000
        })

        setTimeout(function () {
          wx.hideToast()
        }, 200)