小程序筛选

43次阅读

共计 3181 个字符，预计需要花费 8 分钟才能阅读完成。

预览

实现过程
app.json 中添加
“pages”: [
“pages/filter/index”
],
filter/index.wxml
<view class=”container”>
<view class=”list”>
<view class=”search-cat” wx:for=”{{searchList}}” wx:for-item=”p” wx:for-index=”pIndex” wx:key=””>
<view class=”search-title”>{{p.screenKey}}</view>
<view class=”search-items”>
<view bindtap=”onChange” wx:for=”{{p.screenValue}}” wx:for-item=”g” data-parent-index=”{{pIndex}}” data-index=”{{index}}”
data-item=”{{p}}” class=”item {{g.checked ? ‘active’ : ”}}” wx:key=”” >
{{g.value}}
</view>
</view>
</view>
</view>
<view class=”search-bottom”>
<view class=”cancel” bindtap=”doCancel”> 取消 </view>
<view class=”confirm” bindtap=”doSubmit”> 确认 </view>
</view>
</view>
filter/index.wxss
.container {
padding: 0 0 15px 15px;
background: #fff;
min-height: 100vh;
}

.search-title {
padding: 19px 0;
font-size: 16px;
font-weight: 600;
}

.search-items {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}

.search-items .item {
min-width: 60px;
box-sizing: border-box;
padding: 0 15px;
height: 25px;
line-height: 25px;
text-align: center;
font-weight: 500;
border-radius: 3px;
margin: 0 20px 15px 0;
font-size: 14px;
background: #f3f3f6;
}

.search-items .item.active {
background: #ff5000;
color: #fff;
}

.search-bottom {
position: fixed;
bottom: 0;
left: 0;
height: 50px;
line-height: 50px;
width: 100%;
display: flex;
justify-content: center;
width: 100%;
font-weight: 600;
font-size: 17px;
text-align: center;
}

.search-bottom .cancel {
background: #ececf0;
color: #8D8D96;
flex: 1;
}

.search-bottom .confirm {
background: #FF5000;
color: #fff;
flex: 1;
}
filter/index.js
const App = getApp()
Page({
data: {
specialId: ”,
query: [‘ 篮球鞋 ’,’36’],
searchList: [
{
type: ‘radio’,
screenKey: ‘ 时尚 ’,
screenValue: [‘ 篮球鞋 ’, ‘ 运动鞋 ’, ‘ 板鞋 ’, ‘ 跑步鞋 ’]
},
{
type: ‘radio’,
screenKey: ‘ 品牌 ’,
screenValue: [‘ 阿迪达斯 ’, ‘ 耐克 ’, ‘ 皮尔卡丹 ’]
},
{
type: ‘checkbox’,
screenKey: ‘ 尺码 ’,
screenValue: [
’36’,
‘36.5’,
’37’,
‘37.5’,
’38’,
‘38.5’,
’39’,
‘39.5’,
’40’,
‘40.5’,
’41’,
‘41.5’,
’42’,
‘42.5’,
’43’,
‘43.5’
]
}
] // 搜索关键词
},
onLoad: function(options) {
console.log(options)
// 上个页面传递搜索关键词数组，目前在 data 里 query 设置
// this.data.query = options.query
// 搜索关键词
this.getSearchItems()
},
// 获取搜索选项
getSearchItems() {
const _this = this
// 异步请求数据后处理，这里直接拿假数据
const searchItems = this.data.searchList.map(n => {
return Object.assign({}, n, {
screenValue: n.screenValue.map(m =>
Object.assign(
{},
{
checked: _this.data.query.includes(m), // 回显 query 里有返回 true
value: m
}
)
)
})
})
this.setData({
searchList: searchItems
})
},
// 点击筛选项
onChange(e) {
const {parentIndex, item, index} = e.currentTarget.dataset
// 如果选中状态
if (item.screenValue[index].checked) {
item.screenValue[index].checked = false // 取消选择
} else {
// 如果不是多选
if (item.type != ‘checkbox’) {
// 全部重置为未选择状态
item.screenValue.map(n => (n.checked = false))
}
// 将点击的设置为选中
item.screenValue[index].checked = true
}
this.setData({
[`searchList[${parentIndex}]`]: item
})
},
// 取消, 清空数据返回上一个页面
doCancel() {
// var pages = getCurrentPages() // 获取页面栈
// var prevPage = pages[pages.length – 2] // 前一个页面
// prevPage.setData({
// query: [], // 重置
// isBack: true
// })
// // 返回登录之前的页面
// wx.navigateBack({
// delta: 1
// })
},
// 提交，携带数据返回上一个页面
doSubmit() {
let selected = []
// 获取所有选中
this.data.searchList.map(n => {
n.screenValue.map(m => {
if (m.checked == true) {
selected.push(m.value)
}
})
})
console.log(selected)
// var pages = getCurrentPages() // 获取页面栈
// var prevPage = pages[pages.length – 2] // 前一个页面
// // 携带数据，返回登录之前的页面
// prevPage.setData({
// query: selected,
// isBack: true
// })
// wx.navigateBack({
// delta: 1
// })
}
})