var app = getApp()

Page({

data: {

tabTxt: ['品牌', '价格', '销量'],//分类

tab: [true, true, true],

pinpaiList: [{ 'id': '1', 'title': '万科' }, { 'id': '1', 'title': '碧桂园' }],

pinpai_id: 0,//品牌

pinpai_txt: '',

jiage_id: 0,//价格

jiage_txt: '',

xiaoliang_id: 0,//销量

xiaoliang_txt: '',

},

onLoad: function (options) {

var that = this

wx.request({

url: 'http://192.168.1.103/json/shuju.json',

method: 'get',

headers: {

'Content-Type': 'json'

},

success: function (res) {

console.log(res);

that.setData({

dataList: res.data

})

}

})

},

// 选项卡

filterTab: function (e) {

var data = [true, true, true], index = e.currentTarget.dataset.index;

data[index] = !this.data.tab[index];

this.setData({

tab: data

})

},

//筛选项点击操作

filter: function (e) {

var self = this,

id = e.currentTarget.dataset.id,

txt = e.currentTarget.dataset.txt,

tabTxt = this.data.tabTxt;

switch (e.currentTarget.dataset.index) {

case '0':

tabTxt[0] = txt;

self.setData({

tab: [true, true, true],

tabTxt: tabTxt,

pinpai_id: id,

pinpai_txt: txt

});

break;

case '1':

tabTxt[1] = txt;

self.setData({

tab: [true, true, true],

tabTxt: tabTxt,

jiage_id: id,

jiage_txt: txt

});

break;

case '2':

tabTxt[2] = txt;

self.setData({

tab: [true, true, true],

tabTxt: tabTxt,

xiaoliang_id: id,

xiaoliang_txt: txt

});

break;

}

//数据筛选

self.getDataList();

},

//加载数据

getDataList: function () {

//调用数据接口，获取数据

var that = this

wx.request({

url: 'http://192.168.1.103/json/shuju-1.json',

method: 'post',

headers: {

'Content-Type': 'application/json'

},

success: function (res) {

console.log(res);

that.setData({

dataList: res.data

})

}

})

},

})

这是html

<!--筛选项-->

<view class="tabLayer" hidden="{{tab[0]}}">

<text class="{{pinpai_id==0?'active':''}}" data-id="0" data-index="0" data-txt="产品" bindtap="filter">不限</text>

<text class="{{pinpai_id==item.id?'active':''}}" wx:for="{{pinpaiList}}" wx:key="pp" wx:for-item="item" data-id="{{item.id}}" data-index="0"data-txt="{{item.title}}" bindtap="filter">{{item.title}}</text>

</view>

<view class="tabLayer" hidden="{{tab[1]}}">

<text class="{{jiage_id==0?'active':''}}" data-id="0" data-index="1" data-txt="价格" bindtap="filter">不限</text>

<text class="{{jiage_id==1?'active':''}}" data-id="1" data-index="1" data-txt="9000" bindtap="filter">9000</text>

<text class="{{jiage_id==2?'active':''}}" data-id="2" data-index="1" data-txt="12000" bindtap="filter">12000</text>

<text class="{{jiage_id==3?'active':''}}" data-id="3" data-index="1" data-txt="15000" bindtap="filter">15000</text>

</view>

<view class="tabLayer" hidden="{{tab[2]}}">

<text class="{{xiaoliang_id==0?'active':''}}" data-id="0" data-index="2" data-txt="销量" bindtap="filter">不限</text>

<text class="{{xiaoliang_id==1?'active':''}}" data-id="1" data-index="2" data-txt="从高到低" bindtap="filter">从高到低</text>

<text class="{{xiaoliang_id==2?'active':''}}" data-id="2" data-index="2" data-txt="从低到高" bindtap="filter">从低到高</text>

</view>

<view class='list'>

<block wx:for="{{dataList}}" wx:key='{{index}}' wx:for-item="item">

<view class="list_item">

<navigator url='details?id={{item.goods_id}}'>

<view class='img'>

<image src="{{item.goods_img}}"  mode="scaleToFill"/>

</view>

<view class='info'>

<view class='title'>{{item.goods_title}}</view>

<view class='price'>￥{{item.goods_price}}</view>

<view class='num'>销量{{item.goods_xiaoliang}}</view>

</view>

</navigator>

<view class='clear'></view>

</view>

</block>

</view>

这是json

[

      {

        "goods_id": "1",

        "goods_title": "商品标题1",

        "goods_img": "http://192.168.1.103/img/201301281416578921.jpg",

        "goods_xiaoliang": "0",

        "goods_price": "180"

      }, 

      {

        "goods_id": "1",

        "goods_title": "商品标题2",

        "goods_img": "http://192.168.1.103/img/201301281416578921.jpg",

        "goods_xiaoliang": "0",

        "goods_price": "90"

      }, 

      {

        "goods_id": "1",

        "goods_title": "商品标题3",

        "goods_img": "http://192.168.1.103/img/201301281416578921.jpg",

        "goods_xiaoliang": "0",

        "goods_price": "90"

      },

       {

        "goods_id": "1",

        "goods_title": "商品标题4",

        "goods_img": "http://192.168.1.103/img/201301281416578921.jpg",

        "goods_xiaoliang": "0",

        "goods_price": "80"

      },

       {

        "goods_id": "1",

        "goods_title": "商品标题1",

        "goods_img": "http://192.168.1.103/img/201301281416578921.jpg",

        "goods_xiaoliang": "0",

        "goods_price": "75"

      }

    ]