細分類欄

<!-- JX -->
        <view hidden="{{!selectedFlag2}}">
            <view class="{{scrollTop>150 ? 'Fixed' : 'Absolute'}}">
              <scroll-view scroll-x="true">
                <view class="fen_class">
                  <view class="{{select_1}}" bindtap="1">{{list_ms[0]}}</view>
                  <view class="{{select_2}}" bindtap="2">{{list_ms[1]}}</view>
                  <view class="{{select_3}}" bindtap="3">{{list_ms[2]}}</view>
                  <view class="{{select_4}}" bindtap="4">{{list_ms[3]}}</view>
                  <view class="{{select_5}}" bindtap="5">{{list_ms[4]}}</view>
                  <view class="{{select_6}}" bindtap="6">{{list_ms[5]}}</view>
                  <view class="{{select_7}}" bindtap="7">{{list_ms[6]}}</view>
                  <view class="{{select_8}}" bindtap="8">{{list_ms[7]}}</view>
                  <view class="{{select_9}}" bindtap="9">{{list_ms[8]}}</view>
                  <view class="{{select_10}}" bindtap="10">{{list_ms[9]}}</view>
                  <view class="{{select_11}}" bindtap="11">{{list_ms[10]}}</view>
                  <view class="{{select_12}}" bindtap="12">{{list_ms[11]}}</view>
                </view>
              </scroll-view>
            </view>
          <view>
            <block wx:for="{{data_object}}" wx:for-item="item" wx:for-index="index" wx:key="key">
              <view class="li bg-gray" bindtap="productInfo" data-d="{{item}}">
                <view><image class="img" src="{{item[7]}}"></image></view>
                <view class="text">
                  <view class="title"><view class="pt">{{item[0]}}</view>\t{{item[1]}}</view>
                  <view class="price1">
                    <view class="price">
                    <view class="l1">{{item[5]}}</view><view class="l2">{{item[4]}}</view><view class="l4">{{item[3]}}</view><view class="l3">{{item[2]}}</view>
                    </view>
                  </view>
                </view>
              </view>
            </block>
          </view>  
          <view class="loading" hidden="{{!loadingMore}}"><view>正在加載</view></view>
          <view class="loading" hidden="{{!loadingOver}}"><view>被掏空啦</view></view>
        </view>

 

 


.Fixed{
  width: 100%;
  position: fixed;
  justify-content: space-around;
  top: 0rpx;
  z-index:99;
  padding-top: 25rpx;
  border-top: 1px solid orange;
  background-color: #fff;
  border-radius: 30rpx;
  height: 100rpx;
  line-height: 100rpx;
  background-color: orange;
}

.fen_class{
  width: 180%;
  height: 2.2em;
  line-height: 2.8em;
  display: flex;
  justify-content: space-around;
  font-size: 34rpx;
  margin-top: 0.5px;
  margin-bottom: 5px;
  background-color: orange;
  border-radius: 40rpx;
}
/* 細分 */
.select_bh{
  color: #fff;
  border-bottom: 5rpx solid #fff;
  border-radius: 25rpx;
  font-weight: bold;
}
.unselect_bh{
  color: #fff;
}
/* 列表詳情 */
.li {
  margin: 0.4em 0.8em;
  padding: 0.2em 0.2em;
  display: flex;
  justify-content: space-around;
  width: 92%;
  height: 225rpx;
  font-size:14px;
}

.bg-gray{
  background-color: rgb(255, 255, 255)!important;
  border-bottom: 1rpx solid  #fff!important;
}
.img{
  width: 100px;
  height: 110px;
}
.text{
  margin-left: 10px;
}
.title{
  display: -webkit-box;
  overflow: hidden;/*超出一行文字自動隱藏 */
  text-overflow: ellipsis;/*文字隱藏後添加省略號*/
  word-wrap: break-word;
  white-space: normal !important;/*強制不換行 */
  -webkit-line-clamp: 2;/*多餘2行的部分以省略號顯示*/
  -webkit-box-orient: vertical;
  margin-top: 1em;
}
.price1{
  margin-top: 10px;
}
.price{
  display: inline;
}
.price view{
  display: inline;
}
.price .l3,.l2,.l4{
  margin-left: 7px;
}

.pt{
  color: white;
  background-color: #ff6633;
  display: inline;
  border-radius: 5px;
  font-size: 12px;
}

.l1{
  color: #ff6633;
}

.l3,.l4{
  background-color: #ff6633;
  border-radius: 10rpx;
  color: white;
  font-size: 22rpx;
}
.l2{
  color: gray;
  text-decoration:line-through;
}

::-webkit-scrollbar{/*隱藏滾動條*/
width: 0;
height: 0;
color: transparent;
}

 

var jumpFlag = true;

// BH
    select_1: 'select_bh',
    select_2: 'unselect_bh',
    select_3: 'unselect_bh',
    select_4: 'unselect_bh',
    select_5: 'unselect_bh',
    select_6: 'unselect_bh',
    select_7: 'unselect_bh',
    select_8: 'unselect_bh',
    select_9: 'unselect_bh',
    select_10: 'unselect_bh',
    select_11: 'unselect_bh',
    select_12: 'unselect_bh',




    data_object: {
        list0: ['天貓', '香蕉10元4斤包郵', '券:¥3', '返:¥3', '¥13', '¥10', '口令1','./../../img/1.jpg','./../../img/x.jpg|./../../img/1.jpg', 'fangAn1'],
        list1: ['京東', '回力男鞋2020新款春秋季透氣運動男士休閒鞋子百搭潮鞋工裝老爹鞋', '券:¥15', '返:¥4', '¥89', '¥74', '鏈接1','./../../img/x.jpg','./../../img/x.jpg|./../../img/1.jpg', 'fangAn1'],
        list2: ['京東', '回力男鞋2020新款春秋季透氣運動男士休閒鞋子百搭潮鞋工裝老爹鞋', '券:¥15', '返:¥4', '¥89', '¥74', '鏈接1','./../../img/x.jpg','./../../img/x.jpg|./../../img/1.jpg', 'fangAn1'],
        list3: ['京東', '回力男鞋2020新款春秋季透氣運動男士休閒鞋子百搭潮鞋工裝老爹鞋', '券:¥15', '返:¥4', '¥89', '¥74', '鏈接1','./../../img/x.jpg','./../../img/x.jpg|./../../img/1.jpg', 'fangAn1'],
      },



// ---------------------------------------BH-------------------------------------
    1:function(){
        this.setData({
            select_1: 'select_bh',
            select_2: 'unselect_bh',
            select_3: 'unselect_bh',
            select_4: 'unselect_bh',
            select_5: 'unselect_bh',
            select_6: 'unselect_bh',
            select_7: 'unselect_bh',
            select_8: 'unselect_bh',
            select_9: 'unselect_bh',
            select_10: 'unselect_bh',
            select_11: 'unselect_bh',
            select_12: 'unselect_bh',
        });
        //點擊1時拿着該字段去請求數據覆蓋data_object
        console.log(this.data.list_ms[0]);
    },
    2:function(){
        this.setData({
            select_1: 'unselect_bh',
            select_2: 'select_bh',
            select_3: 'unselect_bh',
            select_4: 'unselect_bh',
            select_5: 'unselect_bh',
            select_6: 'unselect_bh',
            select_7: 'unselect_bh',
            select_8: 'unselect_bh',
            select_9: 'unselect_bh',
            select_10: 'unselect_bh',
            select_11: 'unselect_bh',
            select_12: 'unselect_bh',
        });
        //點擊2時拿着該字段去請求數據覆蓋data_object
        console.log(this.data.list_ms[1]);
    },
    3:function(){
        this.setData({
            select_1: 'unselect_bh',
            select_2: 'unselect_bh',
            select_3: 'select_bh',
            select_4: 'unselect_bh',
            select_5: 'unselect_bh',
            select_6: 'unselect_bh',
            select_7: 'unselect_bh',
            select_8: 'unselect_bh',
            select_9: 'unselect_bh',
            select_10: 'unselect_bh',
            select_11: 'unselect_bh',
            select_12: 'unselect_bh',
        });
        //點擊3時拿着該字段去請求數據覆蓋data_object
        console.log(this.data.list_ms[2]);
    },
    4:function(){
        this.setData({
            select_1: 'unselect_bh',
            select_2: 'unselect_bh',
            select_3: 'unselect_bh',
            select_4: 'select_bh',
            select_5: 'unselect_bh',
            select_6: 'unselect_bh',
            select_7: 'unselect_bh',
            select_8: 'unselect_bh',
            select_9: 'unselect_bh',
            select_10: 'unselect_bh',
            select_11: 'unselect_bh',
            select_12: 'unselect_bh',
        });
        //點擊4時拿着該字段去請求數據覆蓋data_object
        console.log(this.data.list_ms[3]);
    },
    5:function(){
        this.setData({
            select_1: 'unselect_bh',
            select_2: 'unselect_bh',
            select_3: 'unselect_bh',
            select_4: 'unselect_bh',
            select_5: 'select_bh',
            select_6: 'unselect_bh',
            select_7: 'unselect_bh',
            select_8: 'unselect_bh',
            select_9: 'unselect_bh',
            select_10: 'unselect_bh',
            select_11: 'unselect_bh',
            select_12: 'unselect_bh',
        });
        //點擊5時拿着該字段去請求數據覆蓋data_object
        console.log(this.data.list_ms[4]);
    },
    6:function(){
        this.setData({
            select_1: 'unselect_bh',
            select_2: 'unselect_bh',
            select_3: 'unselect_bh',
            select_4: 'unselect_bh',
            select_5: 'unselect_bh',
            select_6: 'select_bh',
            select_7: 'unselect_bh',
            select_8: 'unselect_bh',
            select_9: 'unselect_bh',
            select_10: 'unselect_bh',
            select_11: 'unselect_bh',
            select_12: 'unselect_bh',
        });
        //點擊其它時拿着該字段去請求數據覆蓋data_object
        console.log(this.data.list_ms[5]);
    },
    7:function(){
        this.setData({
            select_1: 'unselect_bh',
            select_2: 'unselect_bh',
            select_3: 'unselect_bh',
            select_4: 'unselect_bh',
            select_5: 'unselect_bh',
            select_6: 'unselect_bh',
            select_7: 'select_bh',
            select_8: 'unselect_bh',
            select_9: 'unselect_bh',
            select_10: 'unselect_bh',
            select_11: 'unselect_bh',
            select_12: 'unselect_bh',
        });
        //點擊其它時拿着該字段去請求數據覆蓋data_object
        console.log(this.data.list_ms[6]);
    },
    8:function(){
        this.setData({
            select_1: 'unselect_bh',
            select_2: 'unselect_bh',
            select_3: 'unselect_bh',
            select_4: 'unselect_bh',
            select_5: 'unselect_bh',
            select_6: 'unselect_bh',
            select_7: 'unselect_bh',
            select_8: 'select_bh',
            select_9: 'unselect_bh',
            select_10: 'unselect_bh',
            select_11: 'unselect_bh',
            select_12: 'unselect_bh',
        });
        //點擊其它時拿着該字段去請求數據覆蓋data_object
        console.log(this.data.list_ms[7]);
    },
    9:function(){
        this.setData({
            select_1: 'unselect_bh',
            select_2: 'unselect_bh',
            select_3: 'unselect_bh',
            select_4: 'unselect_bh',
            select_5: 'unselect_bh',
            select_6: 'unselect_bh',
            select_7: 'unselect_bh',
            select_8: 'unselect_bh',
            select_9: 'select_bh',
            select_10: 'unselect_bh',
            select_11: 'unselect_bh',
            select_12: 'unselect_bh',

        });
        //點擊其它時拿着該字段去請求數據覆蓋data_object
        console.log(this.data.list_ms[8]);
    },
    10:function(){
        this.setData({
            select_1: 'unselect_bh',
            select_2: 'unselect_bh',
            select_3: 'unselect_bh',
            select_4: 'unselect_bh',
            select_5: 'unselect_bh',
            select_6: 'unselect_bh',
            select_7: 'unselect_bh',
            select_8: 'unselect_bh',
            select_9: 'unselect_bh',
            select_10: 'select_bh',
            select_11: 'unselect_bh',
            select_12: 'unselect_bh',
        });
        //點擊其它時拿着該字段去請求數據覆蓋data_object
        console.log(this.data.list_ms[9]);
    },
    11:function(){
        this.setData({
            select_1: 'unselect_bh',
            select_2: 'unselect_bh',
            select_3: 'unselect_bh',
            select_4: 'unselect_bh',
            select_5: 'unselect_bh',
            select_6: 'unselect_bh',
            select_7: 'unselect_bh',
            select_8: 'unselect_bh',
            select_9: 'unselect_bh',
            select_10: 'unselect_bh',
            select_11: 'select_bh',
            select_12: 'unselect_bh',
        });
        //點擊其它時拿着該字段去請求數據覆蓋data_object
        console.log(this.data.list_ms[10]);
    },
    12:function(){
        this.setData({
            select_1: 'unselect_bh',
            select_2: 'unselect_bh',
            select_3: 'unselect_bh',
            select_4: 'unselect_bh',
            select_5: 'unselect_bh',
            select_6: 'unselect_bh',
            select_7: 'unselect_bh',
            select_8: 'unselect_bh',
            select_9: 'unselect_bh',
            select_10: 'unselect_bh',
            select_11: 'unselect_bh',
            select_12: 'select_bh',
        });
        //點擊其它時拿着該字段去請求數據覆蓋data_object
        console.log(this.data.list_ms[11]);
    },





    /** info */
    productInfo: function (e) {
        let data = e.currentTarget.dataset.d;
        // 防止重複點擊
        if (jumpFlag) {
            jumpFlag = false;
            wx.navigateTo({
                url: './../../to2pages/productInfo/productInfo?data=' + data
            });

        }
    },

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章