小程序加载分类下的数据,以及跳转到数据的详情页

  1. 页面数据data设置
    /**
       * 页面的初始数据
       */
      data: {
        fenlei:[],//设置分类空数组
        fabus:[], //设置发布空数组
        startCateId:1   //设置开始分类id
      },
  2. 进入页面加载分类数据以及调用第一个分类下的数据
    /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        this.loadIndex();
        this.getfabu()
      },
    
      // 分类数据调用
      loadIndex: function () {
        var url = app.globalData.domain + 'cate/getallcate';
        var params = {};
        util.wxRequest(url, params, data => {
          this.setData({
            fenlei: data
          })
        }, data => { }, data => { });
      },
    
      //首次加载第一个分类下发布
      getfabu: function () {
        var startCateId = this.data.startCateId;
        var url = app.globalData.domain + 'fabu/getfabus/cateid/';
        var params = {cateid: startCateId};
        util.wxRequest(url, params, data => {
          //console.log(data);
          this.setData({
            fabus: data
          })
        }, data => { }, data => { });
      },
  3. 加载指定分类下的发布以及选定高亮状态
    <view class='head'>
        <block wx:for="{{fenlei}}">
          <view bindtap='changid' data-id='{{item.id}}' wx:if="{{item.id === startCateId}}" class='dianji'>{{item.catename}}</view>
          <view bindtap='changid' data-id='{{item.id}}' wx:else class='weidianji'>{{item.catename}}</view>
        </block>
      </view>
    //加载指定分类下发布
      changid: function (e) {
        var curId = e.target.dataset.id;//获取cateid
        this.setData({startCateId:curId});//修改data里的startCateId
        var startCateId = this.data.startCateId;//重新获取startCateId
        var url = app.globalData.domain + 'fabu/getfabus';
        var params = { cateid: startCateId};
        util.wxRequest(url, params, data => {
          //console.log(data);
          this.setData({
            fabus: data
          })
        }, data => { }, data => { });
      },
  4. 跳转到物品详情页
    <view class='fabu-list' bindtap='showgoods' data-id='{{item.id}}' wx:for="{{ fabus }}">
    //跳转到物品详情页面
      showgoods: function (e) {
        var id = e.currentTarget.dataset.id;
        wx.navigateTo({
          url: '../wuping/wuping?id=' + id,
        })
      },
  5. 物品详情页接受id调用数据
    /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        var id=options.id;//接受传递过来的id
        this.goodsinfo(id);
        this.getcomment(id);
      },
    
      //获取物品详情
      goodsinfo: function (id) {
        var url = app.globalData.domain + 'fabu/getgoodsinfo';
        var params = {id:id};
        util.wxRequest(url, params, data => {
          //console.log(data);
          this.setData({
            goodsInfo: data.goodsInfo,
            goodsImgs: data.goodsImgs
          })
        }, data => { }, data => { });
      },

猜你喜欢

转载自blog.csdn.net/zdklhh/article/details/88944180