微信小程序筛选侧边栏全选与反全选

最新推荐文章于 2024-05-10 01:12:13 发布

原创

最新推荐文章于 2024-05-10 01:12:13 发布 · 605 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

本文详细描述了如何在微信小程序中使用原生代码创建一个包含模特类型、年龄和城市筛选功能的侧边栏，包括CSS样式和JavaScript事件处理。

小程序中经常会有筛选侧边栏的按钮，今天用原生小程序实现这一功能。

1.wxml核心代码

<button class="filterBtn" bindtap="translate">
	<text>筛选</text>
	<text class="iconfont icon-shaixuan"></text>
</button>
<view class="float {
  
  {isRuleTrue?'isRuleShow':'isRuleHide'}}">
	<view class="closebtn" bindtap="success"></view>
	<view class="animation-element" style="padding-top: {
  
  {navHeight}}px">
		<form class="filterForm" style="height: calc(100% - {
  
  {filterBtnHeight}}px);">
			<view class="filterbox">
				<view class="filter-label">
					<text class="title">模特类型</text>
				</view>					
				<view class="filtergroup">
					<checkbox-group bindchange="modelChange">													
						<label wx:for="{
  
  {listModel}}" wx:key="*this" class="txt-ellipsis {
  
  {item.checked?'active':''}}">
							<checkbox value="{
  
  {item.code}}" checked="{
  
  {item.checked}}" />{
  
  {item.value}}
						</label>
					</checkbox-group>
				</view>
			</view>
			<view class="filterbox">
				<view class="filter-label">
					<text class="title">年龄</text>
				</view>
				<view class="filtergroup">
					<input type="text" placeholder="最低年龄" placeholder-class="input-placeholder"></input>
					<view class="line"></view>
					<input type="text" placeholder="最高年龄" placeholder-class="input-placeholder"></input>
				</view>
			</view>
			<view class="filterbox">
				<view class="filter-label">
					<text class="title">所在城市</text>
					<label class="selectAll" bindtap="selectall">
					    <checkbox value="all" checked="{
  
  {select_all}}" />{
  
  {select_all_font}}
					</label>
				</view>
				<view class="filtergroup">
					<checkbox-group bindchange="checkChange"&g