您现在的位置: 微信小程序 > 微信小程序开发 > 教程 >

怎么实现两个view动态排序?

来源:微信小程序 编辑:Yiyongtong.com 发布时间:2018-10-26 08:45热度:
wxml:
<view class='LBall' >
<!-- 1:楼盘商品介绍 -->
<block  wx:for='{{loupanbt}}'  data-loupanID="{{loupanbt.loupanbtID}}" wx:for-item="loupanbt"   wx:key="{{loupanbt.id}}">
<view class='anjia-loupanjieshao'>
<view class='maidian-thought-1'>\r\t{{loupanbt.loupanbiaoti}}\t\r</view>
<view class='anjia-wenzi'>{{loupanbt.loupanwenben}}</view>
<view class='anjia-image'><image src='{{loupanbt.images}}'></image></view>
</view>

<!-- 2:预约拨打电话 -->
<view class='tantou' wx:for='{{tantou}}' data-tantouID="{{tantou.tantouID}}"  wx:for-item="tantou"   wx:key="{{unique}}">
<view class='tantou-xinxi'>
<button class='tantou-lejie'><navigator url="">{{tantou.lejie}}
</navigator></button>
<button class='tantou-bodas' catchtap='phone'>{{tantou.bodas}}</button>
</view>
<view class='tantou-xinxi'>
<form bindsubmit="yuyueSubmit">
<input type="number"  class="yuyuephone" name="yuyuephone" placeholder="输入您电话"id="yuyuephone"  maxlength="11" bindinput='blurPhone'/>
<button form-type='submit' class='yuyuebtn'>{{tantou.queding}}</button>
</form>
</view>
</view>
</block>
</view>







js:请求代码
//成功后的回调
      success: function (res) {
        console.log(res)
        var status=that.data.loupanID;
        var status=that.data.tantouID;
        if (status == 1) { //假设这json有loupanbt.loupanbtID参数
          that.setData({
            loupanbt: res.data,//生成div  
          })
        } else if (status == 2) { //假设这json有tantou.tantouID参数
          const length = this.data.tantou.length;
          this.data.tantou = [{ lejie: length, bodas: length, queding: length, unique:'unique_' + length }].concat(this.data.tantou)//小程序端自动增加一个静态div
           this.setData({
             tantou:boda//生成div
           })


        }

json模拟:
[  {          "loupanbtID":"1",     "loupanbiaoti": "靠近地铁,临近商圈1",    
 "loupanwenben":"穗莞深轨道规划接驳,东莞地铁时代来临卓越中寰踞R2线天宝站B出口,
真地铁口物业直达CBD,纵贯穗-莞-深-港同时20多条公交线路,交通便捷",     "images": "http://192.168.1.103/img/ceshi.jpg"  }, 
 {           "loupanbtID":"1",     "loupanbiaoti": "靠近地铁,临近商圈2",    
 "loupanwenben":"穗莞深轨道规划接驳,东莞地铁时代来临卓越中寰踞R2线天宝站B出口,
真地铁口物业直达CBD,纵贯穗-莞-深-港同时20多条公交线路,交通便捷",    
 "images": "http://192.168.1.103/img/ceshi.jpg"  },  {          "tantouID":"2"  }, 
 {          "loupanbtID":"1",     "loupanbiaoti": "靠近地铁,临近商圈3",    
 "loupanwenben":"穗莞深轨道规划接驳,东莞地铁时代来临卓越中寰踞R2线天宝站B出口,
真地铁口物业直达CBD,纵贯穗-莞-深-港同时20多条公交线路,交通便捷",    
 "images": "http://192.168.1.103/img/ceshi.jpg"  },  {           "loupanbtID":"1",    
 "loupanbiaoti": "靠近地铁,临近商圈4",     "loupanwenben":"穗莞深轨道规划接驳,东莞地铁时代来临卓越中寰踞R2线天宝站B出口,
真地铁口物业直达CBD,纵贯穗-莞-深-港同时20多条公交线路,交通便捷",     "images": "http://192.168.1.103/img/ceshi.jpg"  },        ]


我想根据后端排序来实现:商品列表view和拨打电话view,动态随意排序(我后端有个编辑器可以把商品列表和拨打电话view随意打乱顺序),我前端请求时候该怎么判断是商品列表还是拨打电话view?
目前我上面代码:我的思路是:根据定义id(data-tantouID="{{tantou.tantouID}}" )来判断顺序,数据我拿到了,可是组装不成功,,有大佬指教下问题所在吗?

 
本主题由 Rolan 于 4 天前 审核通过
 

SF)MN8PF`Q39LFV$@V(OGZI.png (91.32 KB, 下载次数: 1)

 

SF)MN8PF`Q39LFV$@V(OGZI.png