微信小程序（二十八）网络请求数据进行列表渲染

• 移动开发

注释很详细，直接上代码

上一篇

新增内容：
1.GET请求的规范
2.数据赋值的方法

源码：

index.wxml



    
        下标
        序号
        姓名
        年龄
        性别
    
    
    <view wx:for="{{students}}" wx:key="id" wx:for-item="stu" 
    wx:for-index="idx" class="item">
        {{idx}}
        {{stu.id}}
        {{stu.name}}
        {{stu.age}}
        {{stu.gender}}

index.wxss

.item{
    display: flex;
    /* 水平均分 */
    justify-content:space-evenly;
    height: 60rpx;
}

index.js

Page({
    data:{
        //存储学生信息的数组
        students:[]
    },
    getMsgs(){
       wx.request({//自个在服务器写个php就行了

         url: 'http://xxxx.xxxxx.xxxx/xxxx/xxxx.php',
         //请求参数
         data:{
             key:'xxxx'
         },
         //这里有个细节，如果不使用箭头函数那this，
         //则指的是这个函数内部的this而非page的this，
         //也就没法访问外部数据

         success:(res) => {//成功的情况
           
             this.setData({//基础赋值，不明白的看上上上上……一篇
                
                students:res.data.msg//看清楚是冒号是冒号不是等号
             })
           
         }
       })
   }
})

效果演示：

在这里插入图片描述

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/9443041fb9.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐