美文网首页
2019-07-16 条件选择 组件 唯一的条件值

2019-07-16 条件选择 组件 唯一的条件值

作者: 太阳照常升起_9c4e | 来源:发表于2019-07-16 12:26 被阅读0次
    image.png
    <!--pages/component/product_sort/index.wxml-->
    <!-- 条件选择 start -->
        <view class="product-header">
            <view wx:for="{{condition}}" wx:key='index' bindtap="on_slect" data-id="{{item.id}}" class="product-header-title {{item.img_display!=true?'yellow':''}}">{{item.name}}<image src="https://dk-shop-img.oss-cn-beijing.aliyuncs.com/icon_top_bottom.png" wx:if="{{item.imgnone}}" hidden="{{item.img_display}}" class="user-arrow {{item.fx!=true?'rotate':'rotate1'}}"></image></view> 
          </view>  
      <!-- 条件选择 End -->
    
    var curindex = 0;
    //请求数据初始化值
    var ifLoadMore = null;
    var order = 0;//默认综合排序列
    var orderindex = 0;//默认排序id
    Component({
      properties: {
      },
      data: {
        // 这里是一些组件内部数据
        condition: [
          { "id": 0, "name": "综合", "img_display": false, "yellow": "yellow", "fx": false, "imgnone": false },
          { "id": 1, "name": "佣金", "img_display": true, "yellow": "", "fx": false, "imgnone": true },
          { "id": 2, "name": "价格", "img_display": true, "yellow": "", "fx": false, "imgnone": true },
          { "id": 3, "name": "销量", "img_display": true, "yellow": "", "fx": false, "imgnone": true }
        ],
        //排序方式:0-综合排序;1-按佣金比率升序;2-按佣金比例降序;3-按价格升序;4-按价格降序;5-按销量升序;6-按销量降序;
        orders: [
          [
            { "id": 0, "title": 0, "msg": "综合排序" },
            { "id": 1, "title": 0, "msg": "综合排序" }],
          [{ "id": 0, "title": 1, "msg": "佣金比率升序" },
          { "id": 1, "title": 2, "msg": "按佣金比例降序" }],
          [{ "id": 0, "title": 3, "msg": "按价格升序" },
          { "id": 1, "title": 4, "msg": "按价格降序" }],
          [{ "id": 0, "title": 5, "msg": "按销量升序" },
          { "id": 1, "title": 6, "msg": "按销量降序" }]
        ],
      },
      methods: {
        // 这里放置自定义方法
        //条件选择器
        on_slect: function (event) {
          let e = event.currentTarget.dataset,
            that = this,
            id = e.id,
            list = this.data.condition,
            belist = this.data.condition[curindex];//上一个选中所在
          order = id
          //判断是点击第二次
          if (id === curindex) {
            // //改变排序
            if (orderindex === 0) {
              orderindex = 1
            } else {
              orderindex = 0
            }
            //改变 图标方向 最高 最低
            let fx = `condition[${id}].fx`;
            this.setData({
              [fx]: !this.data.condition[id].fx
            })
          } else {
            //改变排序
            orderindex = 0
            //初始化 图片箭头方向
            let fx = `condition[${id}].fx`;
            this.setData({
              [fx]: false
            })
          }
          //修改数组中对象的值
          let img_display = `condition[${curindex}].img_display`;
          this.setData({
            [img_display]: true
          })
          img_display = `condition[${id}].img_display`;
          this.setData({
            [img_display]: false
          })
          curindex = id
          // this.setData({
          //   goodsResultList: []
          // })
          // page = 1
          let order_id = this.data.orders[order][orderindex].title//按照什么排序
          console.log("排序是:"+order_id)
          // // this.getoptList(leixing, order_id)
          this.triggerEvent('myevent', { order_id: order_id });
        },
      },
      ready() {
        console.log(this.data.orders);
      },
    })
    
    <!-- 调用 综合排序组件 -->
    <product_sort bind:myevent="onMyEvent"/>
    

    相关文章

      网友评论

          本文标题:2019-07-16 条件选择 组件 唯一的条件值

          本文链接:https://www.haomeiwen.com/subject/hibzkctx.html