微信小程序--365笔记第32天---数组排序,距离最近

1.实现的是数组的排序,以距离排序,将距离最近的显示在上面;

2.可以应用到其他数组排序,都是可以用的;

wxml:

      <view>
        <view>原数组</view>
        <view wx:for="{{array}}">
          <text>{{item.name}}</text>
          <text>{{item.distance}}</text>
        </view>
      </view>

      <view style="height:100rpx"></view>
      <view>
        <view>距离最近</view>
        <view wx:for="{{newArray}}">
          <text>{{item.name}}</text>
          <text>{{item.distance}}</text>
        </view>
      </view>

js:

    data: {
        array: [{
            name: '张三',
            distance: '55km'
          },
          {
            name: '李四',
            distance: '12km'
          }, {
            name: '王五',
            distance: '78km'
          }
        ]
      },

    /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function(options) {
        // 数组排序,可以单独放在一个方法里面,再去调用
        var newArray = this.data.array;
        var s = "";
        for (var i = 1; i < newArray.length; i++) {
          for (var j = i; j > 0; j--) {
            if (newArray[j].distance > newArray[j - 1].distance) {
              s = newArray[j];
              newArray[j] = newArray[j - 1];
              newArray[j - 1] = s;
            }
          }
        }
        console.log(newArray)
        this.setData({
          newArray: newArray.reverse()
        })
      },

可以看下排序的结果

图片.png

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值