微信小程序实现列表页面及上拉加载功能

微信小程序实现列表页面及上拉加载功能

my god，离上篇博客的时间竟然过去将近四个月了。
我呢，有幸从一个Android小白变成了一个前端小白- -

这周开始学习微信小程序啦
大概是1月份开始听到最多的名词了。

废话不多说了
对，这篇还是我的笔记篇，哈哈哈。

涉及到的内容有

• 列表渲染 即（wx:for）
• 页面间传值（目前唯一会的一种）
• 数据请求（wx.request）
• 以及分页的实现

首先实现一个这样的页面（页面间传值）

classification.wxml代码

<!--pages/classification/classification.wxml-->
<block wx:for="{{list}}">
<navigator url="../home/home?id={{item.channel_id}}" hover-class="navigator-hover">//id为要传的值的key,下个页面会用到
    <image src="{{item.avatar}}" class="pic"></image>
    <view class="right">
    <text class="title">{{item.name}}</text>
    </view>
</navigator>
</block>

classification.js

var list;
Page({
  data:{},
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    this.setData({
      list:list 
    })
  }
})
wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {},
  method: 'GET', //必须为大写（例如：POST）
  header: {
      'content-type': 'application/json'
  },
  success: function(res){
    // console.log(res.data);
    list=res.data.data.list;
    // id=res.data.data.list.channel_id;
    // console.log(id);
  }
})

我第一个页面就是这样写的- -
wxml中的navigator标签的属性url中的?后id={{item.channel_id}}，即为要传的值，key是id，值是list的channel_id字段。如果有多个字段用&连接

然后在home.js中接收这个值，在onLoad中的参数options.key（我这里的key为id）就可以得到你上个页面传来的值

// pages/home/home.js
var id,url1,url2,list=[],that,data,listadd;
Page({
  data:{},
  onLoad:function(options){
    // 页面初始化options为页面跳转所带来的参数 
    id=options.id;  //options.id为上个页面传来的参数
    that = this;    //在请求数据时setData使用
    url1="http://xxx"+id+"xxx";  //url拼接
    queryRequest(url1); 
 //请求数据
function queryRequest(url){
wx.request({
  url: url,
  data: {},
  method: 'GET', 
  header: {
      'content-type': 'application/json'
  },
    success: function(res){
    // success
    console.log(res.data);
    data = res.data.data;
    list = res.data.data.list; //把取到的数组的值赋值给list
    for(var i=0;i<list.length;i++){
        var a=timeString(list[i].display_time);
        list[i].time=a;
        list[i].name=list[i].user.name;
        list[i].headpic=list[i].user.avatar;
    }
    that.setData({   //这里调用setData时不能用this.setData，会报错
      list:list
    })
  }
})/时间戳转换为时间
function timeString(time){
  var newDate = new Date();
  newDate.setTime(time);
  // console.log(newDate.toLocaleDateString());
  var result = newDate.toLocaleDateString();
  return result;
}

可以把请求数据的接口写成一个函数，在onload中调用即可，可传参。
以上是关于页面传参的一个示例 其中有一个小知识点 之前做的时候也被卡了一下 就是在请求数据函数中调用setData()函数，不能用this，需要在onLoad中将this赋值给一个变量，我这里用的that，这个随意叫什么可以。
这里也用到了列表渲染wx:for，微信小程序API上介绍的挺清楚的，不懂的多看看，我是之前用过ionic，所以微信用到的数据绑定机制会比较熟悉一点

笔记二 被赋值后的list还能添加对象元素

再给自己贴一下代码- -记住： 被赋值后的list还能添加对象元素，甚至可以将自己的元素重新赋值给新创建的元素。

//请求数据
function queryRequest(url){
wx.request({
  url: url,
  data: {},
  method: 'GET', 
  header: {
      'content-type': 'application/json'
  },
    success: function(res){
    // success
    console.log(res.data);
    data = res.data.data;
    list = res.data.data.list; //把取到的数组的值赋值给list
    for(var i=0;i<list.length;i++){
        var a=timeString(list[i].display_time);
        list[i].time=a;  //仍然可以添加time元素
        list[i].name=list[i].user.name; //甚至可以将自己的元素重新赋值给新创建的元素
        list[i].headpic=list[i].user.avatar;
    }
    that.setData({   //这里调用setData时不能用this.setData，会报错
      list:list
    })
  }
})

笔记三 关于分页

知识点一：两个数组拼接，用concat()方法

    for(var i=0;i<listadd.length;i++){
        var a=timeString(listadd[i].display_time);
        listadd[i].time=a;
        listadd[i].name=listadd[i].user.name;
        listadd[i].headpic=listadd[i].user.avatar;
    } 
    list = list.concat(listadd)

将listadd拼接到list数组中并赋值给list

分页的实现是利用scroll-view标签的下拉到底部回调函数实现
重新请求数据 并且将新的数据放入list中显示即可（数组拼接知识点）

最后贴出home.js和home.wxml的完整代码

// pages/home/home.js
var id,url1,url2,list=[],that,data,listadd;
Page({
  data:{},
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    // this.setData({
      // id:options.id //options.id是上个页面传来的参数 赋值给此js对应的html
    // })
    that = this;//在请求数据时setData使用
    id=options.id;//options.id为上个页面传来的参数
    // console.log(id)
    url1="http://xxx"+id+"xxx";
    queryRequest(url1); 
  },
  lower: function(e){
    url2=url2=url1+"&nt="+data.nt;
    getmoreRequest(url2);
  }
})

//请求数据
function queryRequest(url){
wx.request({
  url: url,
  data: {},
  method: 'GET', 
  header: {
      'content-type': 'application/json'
  },
    success: function(res){
    // success
    console.log(res.data);
    data = res.data.data;
    list = res.data.data.list;
    // console.log(list);
    for(var i=0;i<list.length;i++){
        var a=timeString(list[i].display_time);
        list[i].time=a;
        list[i].name=list[i].user.name;
        list[i].headpic=list[i].user.avatar;
        // console.log(list[i])
        // console.log(list[i].time)
    }
    that.setData({
      list:list
    })
  }
})
}

//下拉加载的请求
function getmoreRequest(url){
wx.request({
  url: url,
  data: {},
  method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
  header: {
      'content-type': 'application/json'
  },
  success: function(res){
    // success
    // console.log(res.data);
    listadd = res.data.data.list
    data = res.data.data
    // list.post(listadd)
    for(var i=0;i<listadd.length;i++){
        var a=timeString(listadd[i].display_time);
        listadd[i].time=a;
        listadd[i].name=listadd[i].user.name;
        listadd[i].headpic=listadd[i].user.avatar;
    } 
    list = list.concat(listadd)
    // console.log(list)
    console.log(list.length)
    that.setData({
      list:list
    })
  },
  fail: function() {
    // fail
  },
  complete: function() {
    // complete
  }
})
}

//时间戳转换为时间
function timeString(time){
  var newDate = new Date();
  newDate.setTime(time);
  // console.log(newDate.toLocaleDateString());
  var result = newDate.toLocaleDateString();
  return result;
}

<!--pages/home/home.wxml-->
<scroll-view scroll-y="true" style="height:600px" bindscrolltolower="lower">
<block wx:for="{{list}}">
<view style="clear:both;">
<image src="{{item.headpic}}" class="img"></image>
<view class="description">
<text>{{item.name}}</text>
<view style="margin-top:20rpx">{{item.time}}</view>
</view>
</view> 
</block>
</scroll-view>