3.微信小程序列表渲染上拉和下拉操作

今天我们讲一下小程序列表的渲染上拉和下拉的操作,操作如下:

新建images 文件夹和pages同级,把图片提前拷贝到该文件下

1.新建目录 – pages – meinvList- meinvList.wxml   

2.meinvList.wxml内容

.微信小程序列表渲染上拉和下拉操作"

代码如下:

<!–pages/meinvList/meinvList.wxml–>

<text>{{message}}</text>

<view>

<!–单个元素这个地方的name直接可以取集合里面的数据–>

<text>这是{{list[0].name}}</text>

<image  src=“/images/1.jpg”/>

<!–循环遍历 wx:fox–>

<!–

 wx:for=”{{list}}” 相当于  for(var i=0; i<list.count;i++)

 

 –>

<text wx:for=“{{list}}” wx:for-item=“a” wx:for-index=“index” >

{{index}}:{{a.name}}

</text>

<image wx:for=“{{list}}” src=“/images/{{item.src}}”>

</image>

</view>


3.meinvList.js

.微信小程序列表渲染上拉和下拉操作"

代码如下:

// pages/meinvList/meinvList.js

Page({

/**

  * 页面的初始数据

  */

data: {

message:“猜猜你都认识吗?”,

list:[

{id:1,name:“波多野结衣”,src:“1.jpg”},

{ id: 2, name: “小泽玛利亚”, src: “2.jpg” },

{ id: 3, name: “明泽吉步”, src: “3.jpg” }

]

},

/**

  * 生命周期函数–监听页面加载

  */

onLoad: function (options) {

},

/**

  * 生命周期函数–监听页面初次渲染完成

  */

onReady: function () {

},

/**

  * 生命周期函数–监听页面显示

  */

onShow: function () {

},

/**

  * 生命周期函数–监听页面隐藏

  */

onHide: function () {

},

/**

  * 生命周期函数–监听页面卸载

  */

onUnload: function () {

},

/**

  * 页面相关事件处理函数–监听用户下拉动作

  */

onPullDownRefresh: function () {

},

/**

  * 页面上拉触底事件的处理函数

  */

onReachBottom: function () {

},

/**

  * 用户点击右上角分享

  */

onShareAppMessage: function () {

}

})

4.演示效果如下:

更多技术请关注

3.微信小程序列表渲染上拉和下拉操作》来自互联网,仅为收藏学习,如侵权请联系删除。本文URL:http://www.hashtobe.com/101.html