預覽
實現過程
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
// })
}
})
總結
領導要求寫在新的頁面,就沒有在頁面寫組件,後續如果再改寫成組件,實現的過程相對簡單,有什麼問題可以留言交流
完整代碼鏈接github