我的远程实习笔记day20---吃喝玩乐项目（列表渲染）

今天是在第二大学远程实习的第二十天，偷偷发个博客记录一下自己的成长哈哈（今天学习吃喝玩乐项目）
1.展示”用户推荐“内容时列表渲染
js：

// 获取信息列表
  HuoquXinxiLiebiao(){
    var that = this
    var TupianQianzhui="https://xx.uom.cn/new/img/"+this.data.xcx_appid+"/";
    wx.request({
      url: 'https://xx.uom.cn/ecmsapi/index.php?mod=chihewanlemokuai&act=chihewanleliebiao',
      method:"POST",
      data:{
        xcx_appid:this.data.xcx_appid
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success:(res)=>{
        console.log("信息",res);
        console.log(TupianQianzhui);
        that.setData({
          Xinxi:res.data.list,
          xcx_appid:this.data.xcx_appid,
          TupianQianzhui:TupianQianzhui
        })
      }
    })
  },
  // 获取点评列表，即：列表下方的点赞、点踩、回复、收藏四个图标
  HuoquDianpingLiebiao(){
    var that=this;
    wx.request({
      url: 'https://xx.uom.cn/ecmsapi/index.php?mod=xinxi&act=dianpinglan',
      method:"POST",
      data:{
        xcx_appid:this.data.xcx_appid,
      },
      header:{
        'content-type': 'application/x-www-form-urlencoded'
      },
      success:(res)=>{
      
        console.log("dd",res.data.list);
        that.setData({
          Dianping:res.data.list,
          xcx_appid:this.data.xcx_appid
        })
      }
    })
  },

通过wx.reqyest请求服务器数据，并存放在数组中，这里的数组名为Xinxi

再从wxml中通过wx:for 和item将内容渲染出来
wxml：

 <!-- 头像、昵称、发布时间 -->
      <view class="QitaXinxi">
        <view>
          <image src="https://xx.uom.cn/d/file/p/2022/09-02/6c1655e3774060bea6204da8e0f0f1c0.jpg"></image>
        </view>
        <view>
          <view>
            <text>{{item.username}}</text>
          </view>
          <view>
            <text>{{item.newspath}}</text>
          </view>
        </view>
      </view>
      <view data-id="{{item.id}}" bindtap="QuChiheWanleXiangqing">

2.展示”周边食娱“内容时列表渲染

// 获取商家位置等信息
  HuoquShangjiaWeizhi(){
    var that=this;
    wx.request({
      url: 'https://xx.uom.cn/ecmsapi/index.php?mod=chihewanlemokuai&act=shangjiaweizhi',
      method:"POST",
      data:{
        xcx_appid:this.data.xcx_appid
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
  
      success:(res)=>{
        var that = this
        console.log("商家信息",res);
        let a = []
        a = res.data.list       
        let i    
        for(i=0;i<res.data.list.length;i++){
          // 下方语句作用为→例：markersid=maiker[i].id
          var markersid = 'markers['+ i +'].id'
          var markerslatitub = 'markers['+ i +'].latitude'
          var markerslongitude = 'markers['+ i +'].longitude'
          var markerswidth = 'markers['+ i +'].width'
          var markersheight = 'markers['+ i +'].height'
          var markersiconPath = 'markers['+ i +'].iconPath'
          var markerstitle = 'markers['+ i +'].title'
            that.setData({      
              //将数据存入markers对象，给地图发送标记点的信息
              [markersid]:a[i].shangjiaid,
              [markerslatitub]:a[i].latitude,
              [markerslongitude]: a[i].longitude,
              [markerswidth]: a[i].width,
              [markerswidth]: 32,
              [markersheight]: 35,
              [markersiconPath]: "../../images/Dingwei.png",
              [markerstitle]: a[i].title,
              ShangjiaXinxi:res.data.list
            })
          }
            console.log(this.data.markers);
        }, 
    })
  },

同样是通过wx.request请求数据，然后将数据分别存储进入markers中和ShangjiaXInxi中

Markers是一个对象的形式，所以采取的方式并不同，更加复杂一些是通过for循环依次将信息存入的，其中建立的数组a存放的内容和ShangjiaXinxi中没有不同。