微信小程序-侧边栏-获取用户选中的值

侧边栏是APP中很常见的一种功能，最近公司的微信小程序项目刚好需要侧边栏这个功能，抱着能自己写就自己写的工作态度，所以决定用基础一些技术来完成此功能。

一、WXML

<view class='body'><view class="leftBox '{{leftView?'leftActive':''}}'" bindtap='getLeft' data-item="1"><view class="left '{{leftView?'leftActive':''}}'" catchtap='getleft'><view class='infolist'><text wx:for="{{items}}" wx:key="{{*this}}" data-item="{{index}}" catchtap='getChecked' class="{{item.userChecked?'userActive':''}}">{{item.value}}</text></view> <button class='clear' catchtap='getClear'>清空选择</button></view></view><button catchtap='getLeft' class='button'>显示侧边栏</button>
</view>

二、WXSS

/*主体  */
.body{width:100vw;height:100vh;background:#ccc;position:relative;
}
.leftBox{width:100vw;height:100vh;background:rgba(0,0,0,.5);position:fixed;right:-1000px;top:0px;z-index:1;
}
.left{width:80vw;height:100vh;background:#fff;position:fixed;right:-1000px;top:0px;transition: all .5s;/*动画  */ z-index:10;
}
.leftActive{right:0px;
}
/*列表  */
.infolist{width:100%;
}
.infolist text{display:inline-block;padding:10px;margin:5px;border-radius:4px;background:#eee;
}
.infolist .userActive{background:red;color:#fff;
}
/*清空  */
.clear{width:100px;height:40px;border-radius:4px;line-height:40px;background:#eee;text-align:center;position:absolute;bottom:10px;left:50%;transform: translateX(-50%);
}/*按钮  */
.button{display:inline-block;width:100vw;height:40px;margin-top:10px;
}

三、JS

Page({data: {leftView:false,userChecked:false,items:[{value:'社会'},{value:'生活'},{value:'教育'},{value:'音乐'}],},//侧边栏显示和隐藏getLeft:function(e){let prent = e.target.dataset.item;let left = this.data.leftView;if (left){this.data.leftView = false;}else{this.data.leftView = true;}this.setData({ leftView: this.data.leftView})},getleft:function(e){},//用户选中的值getChecked:function(e){let index = e.target.dataset.item;let checked = this.data.items;if (checked[index].userChecked){this.data.items[index].userChecked = false;} else{this.data.items[index].userChecked = true;}this.setData({items:this.data.items})let chekced = this.data.items.filter((item)=>{return item.userChecked == true;})console.log(chekced)},//清空选中的值getClear:function(){let checked = this.data.items;for (let i = 0; i < checked.length; i++){checked[i].userChecked = false;}this.setData({items:this.data.items})}
})

四、效果

#点击显示侧边栏按钮，从右边会划出侧边栏的模块，点击灰色区域方可隐藏侧边栏，其中也模拟了侧边栏要显示的内容、用户对其中出现的内容选取数据获取、一键清空功能。

微信小程序-侧边栏-获取用户选中的值相关推荐

微信小程序制作——获取用户信息
微信小程序制作--获取用户信息 1.获取用户信息方式一 wxml <view bindtap="getUserName">获取当前用户名</view> j ...
php取微信名字和头像,微信小程序如何获取用户头像和昵称
本文介绍了微信小程序如何获取用户头像和昵称,分享给大家,具体如下: 代码user.wxml: {{userInfo.nickName}} user.js //sort.js //獲取應用實例 var ...
微信小程序 getPhoneNumber获取用户手机号
微信小程序 getPhoneNumber获取用户手机号在使用getPhoneNumber前,可以先看下官方文档:文档地址在注意这里,官方提到如果不使用之前wx.login调用获取的sessionK ...
微信小程序之获取用户基本信息
微信小程序之获取用户基本信息一.使用Redis存储access-token package com.qfjy.project.weixin.api.accessToken;import com.qf ...
微信小程序访问ip服务器,微信小程序如何获取code？微信小程序如何获取用户ip？...
微信小程序如何获取code?微信小程序如何获取用户ip?最近小编收到很多问题,其中一个就是下面小编为大家整理一下关于微信小程序如何获取code的步骤,希望这些方法能够帮助到大家. 首先,调用 wx.l ...
微信小程序——最新获取用户昵称和头像的方法总结
前段时间微信小程序对获取用户昵称和头像方法进行了更新,网上很多的文章都已经不适用了,这里简单总结一下首先,传统接口wx.getUserInfo的效果会弹出一个给用户的弹窗,需要用户授权,经过测试传统 ...
微信小程序授权获取用户信息和手机号码
微信小程序授权获取用户信息和手机号码 1.微信官方文档登录:https://developers.weixin.qq.com/miniprogram/dev/framework/open-abili ...
微信小程序授权获取用户信息
微信小程序授权获取用户信息小程序昵称突然变成了"微信用户",头像也不显示, <!-- 近期很多小伙伴通过该方法获取头像和昵称,代码也没有做改变,突然就变成了下面这样子 - ...
微信小程序之获取用户地址
在微信小程序中获取定位信息今天一整天基本上都在处理在微信小程序中获取准确地址,给出定位并给出所在城市的问题.经过走了半天弯路,现在总结一下所需要的步骤. 一. 先到腾讯位置服务中心获取KEY 通过小 ...

微信小程序-侧边栏-获取用户选中的值

微信小程序-侧边栏-获取用户选中的值相关推荐

最新文章

热门文章