微信小程序实现下拉菜单切换效果


Posted in Javascript onMarch 30, 2020

本文实例为大家分享了微信小程序实现下拉菜单切换展示的具体代码,供大家参考,具体内容如下

效果图:

微信小程序实现下拉菜单切换效果

微信小程序实现下拉菜单切换效果

微信小程序实现下拉菜单切换效果

微信小程序实现下拉菜单切换效果

wxml:

<!-- 下拉菜单 -->
 <view id="swiper-tab">
 <view class="swiper-tab">
 <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="tabNav">{{first}}
 <i></i>
 </view>
 <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="tabNav">{{second}}
 <i></i>
 </view>
 <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="tabNav">{{thirds}}
 <i></i>
 </view>
 <view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="tabNav">{{fours}}
 <i></i>
 </view>
 </view>
 <swiper current="{{currentTab}}" duration="1000" class="swiper-item" style='display:{{displays}}'>
 <swiper-item>
 <view>
  <view class='qiehuannier'>
  <view class="nav bc_white">
  <view class="{{selected?'red':'default'}}" bindtap="selected">系统提醒</view>
  <view class="{{selected1?'red':'default'}}" bindtap="selected1">优惠活动</view>
  <view class="{{selected2?'red':'default'}}" bindtap="selected2">优惠活动</view>
  </view>
  <view id="rights">
  <view class="{{selected?'show':'hidden'}}">
  <view class="{{_sum == 1?'add_adress':'add_city'}}" data-num="1" bindtap="clickSum" data-name="北京">北京</view>
  <view class="{{_sum == 2?'add_adress':'add_city'}}" data-num="2" bindtap="clickSum" data-name="上海">上海</view>
  <view class="{{_sum == 3?'add_adress':'add_city'}}" data-num="3" bindtap="clickSum" data-name="上海">上海</view>
  <view class="{{_sum == 4?'add_adress':'add_city'}}" data-num="4" bindtap="clickSum" data-name="上海">上海</view>
  <view class="{{_sum == 5?'add_adress':'add_city'}}" data-num="5" bindtap="clickSum" data-name="上海">上海</view>
  <view class="{{_sum == 6?'add_adress':'add_city'}}" data-num="6" bindtap="clickSum" data-name="上海">上海</view>
  </view>
  <view class="{{selected1?'show':'hidden'}}">
  <view class="{{_mum == 1?'add_adre':'add_city'}}" data-num="1" bindtap="clickMum" data-name="北京">北京</view>
  <view class="{{_mum == 2?'add_adre':'add_city'}}" data-num="2" bindtap="clickMum" data-name="上海">上海</view>
  <view class="{{_mum == 3?'add_adre':'add_city'}}" data-num="3" bindtap="clickMum" data-name="上海">上海</view>
  <view class="{{_mum == 4?'add_adre':'add_city'}}" data-num="4" bindtap="clickMum" data-name="上海">上海</view>
  </view>
  <view class="{{selected2?'show':'hidden'}}">
  <view class="{{_cum == 1?'add_ad':'add_city'}}" data-num="1" bindtap="clickCum" data-name="北京">北京</view>
  <view class="{{_cum == 2?'add_ad':'add_city'}}" data-num="2" bindtap="clickCum" data-name="上海">上海</view>
  <view class="{{_cum == 3?'add_ad':'add_city'}}" data-num="3" bindtap="clickCum" data-name="上海">上海</view>
  </view>
  </view>
  </view>
 </view>
 </swiper-item>
 <swiper-item>
 <view class="location_bottom" hidden="">
  <view class="{{_num == 1?'add_citying':'add_city'}}" data-num="1" bindtap="clickNum" data-name="北京">北京</view>
  <view class="{{_num == 2?'add_citying':'add_city'}}" data-num="2" bindtap="clickNum" data-name="上海">上海</view>
  <view class="{{_num == 3?'add_citying':'add_city'}}" data-num="3" bindtap="clickNum" data-name="上海">上海</view>
  <view class="{{_num == 4?'add_citying':'add_city'}}" data-num="4" bindtap="clickNum" data-name="上海">上海</view>
  <view class="{{_num == 5?'add_citying':'add_city'}}" data-num="5" bindtap="clickNum" data-name="上海">上海</view>
  <view class="{{_num == 6?'add_citying':'add_city'}}" data-num="6" bindtap="clickNum" data-name="上海">上海</view>
  <view class="{{_num == 7?'add_citying':'add_city'}}" data-num="7" bindtap="clickNum" data-name="上海">上海</view>
 </view>
 </swiper-item>
 <swiper-item>
 <view class="location_bottom" hidden="">
  <view class="{{_res == 1?'add_House':'add_city'}}" data-num="1" bindtap="clickHouse" data-name="北京">北京</view>
  <view class="{{_res == 2?'add_House':'add_city'}}" data-num="2" bindtap="clickHouse" data-name="北京">上海</view>
  <view class="{{_res == 3?'add_House':'add_city'}}" data-num="3" bindtap="clickHouse" data-name="北京">上海</view>
  <view class="{{_res == 4?'add_House':'add_city'}}" data-num="4" bindtap="clickHouse" data-name="北京">上海</view>
  <view class="{{_res == 5?'add_House':'add_city'}}" data-num="5" bindtap="clickHouse" data-name="上海">上海</view>
  <view class="{{_res == 6?'add_House':'add_city'}}" data-num="6" bindtap="clickHouse" data-name="北京">上海</view>
  <view class="{{_res == 7?'add_House':'add_city'}}" data-num="7" bindtap="clickHouse" data-name="北京">上海</view>
 </view>
 </swiper-item>
 <swiper-item class="shaixuankuang">
 <view class="shaixuan">
  <span class="shuaixuantiaojian">面积</span>
  <block wx:for="{{array}}" wx:key="key">
  <view class="chose-txt" data-id="{{index}}" bindtap="choseTxtColor" style="{{index == one?' border:1rpx solid #e8580c; color: #e8580c':'border:1rpx solid gainsboro;color:gray'}}">
  <text class="chose-p">{{item.name}}</text>
  </view>
  </block>
  <view class="zidingyi">
  <span>自定义面积:</span>
  <input class="front" type='text'></input>
  <p>-</p>
  <input class="back" type='text'></input>
  <button>设置</button>
  </view>
 </view>
 <view class="shaixuan">
  <span class="shuaixuantiaojian">朝向</span>
  <block wx:for="{{chaoxiang}}" wx:key="key">
  <view class="chose-txt" data-id="{{index}}" bindtap="chaoxiang" style="{{index == two?'border:1rpx solid #e8580c; color: #e8580c':'border:1rpx solid gainsboro;color:gray'}}">
  <text class="chose-p">{{item.name}}</text>
  </view>
  </block>
 </view>
 
 <view class="shaixuan">
  <span class="shuaixuantiaojian">楼层</span>
  <block wx:for="{{louceng}}" wx:key="key">
  <view class="chose-txt" data-id="{{index}}" bindtap="louceng" style="{{index == third?'border:1rpx solid #e8580c; color: #e8580c':'border:1rpx solid gainsboro;color:gray'}}">
  <text class="chose-p">{{item.name}}</text>
  </view>
  </block>
 </view>
 <view class="shaixuan">
  <span class="shuaixuantiaojian">装修</span>
  <block wx:for="{{zhuangxiu}}" wx:key="key">
  <view class="chose-txt" data-id="{{index}}" bindtap="zhuangxiu" style="{{index == four?'border:1rpx solid #e8580c; color: #e8580c':'border:1rpx solid gainsboro;color:gray'}}">
  <text class="chose-p">{{item.name}}</text>
  </view>
  </block>
 </view>
 <view class="shaixuan">
  <span class="shuaixuantiaojian">建筑类别</span>
  <block wx:for="{{leibei}}" wx:key="key">
  <view class="chose-txt" data-id="{{index}}" bindtap="leibei" style="{{index == five?'border:1rpx solid #e8580c; color: #e8580c':'border:1rpx solid gainsboro;color:gray'}}">
  <text class="chose-p">{{item.name}}</text>
  </view>
  </block>
 </view>
 <view class="shaixuan">
  <span class="shuaixuantiaojian">特色</span>
  <block wx:for="{{tese}}" wx:key="key">
  <view class="chose-txt" data-id="{{index}}" bindtap="tese" style="{{index == six?'border:1rpx solid #e8580c; color: #e8580c':'border:1rpx solid gainsboro;color:gray'}}">
  <text class="chose-p">{{item.name}}</text>
  </view>
  </block>
 </view>
 <view class="shaixuan">
  <span class="shuaixuantiaojian">排序</span>
  <block wx:for="{{paixu}}" wx:key="key">
  <view class="chose-txt" data-id="{{index}}" bindtap="paixu" style="{{index == seven?'border:1rpx solid #e8580c; color: #e8580c':'border:1rpx solid gainsboro;color:gray'}}">
  <text class="chose-p">{{item.name}}</text>
  </view>
  </block>
 </view>
 <view class="qingkong">
  <span class="tianjian" bindtap="qingchu">清除条件</span>
  <p class="queren" bindtap="queren">确认</p>
 </view>
 </swiper-item>
 </swiper>
 </view>
 <view class="swiper-beijing" bindtap="hideNav" style='display:{{displays}}'></view>

wxss:

/*下拉菜单 */
 
/* 下面是tobar */
 
#swiper-tab {
 width: 100%;
 position: relative;
}
 
.swiper-tab {
 width: 100%;
 text-align: center;
 line-height: 80rpx;
 background-color: white;
}
 
.swiper-tab-list {
 font-size: 30rpx;
 display: inline-block;
 width: 25%;
 color: #666;
 border-bottom: 0rpx;
 position: relative;
}
 
.swiper-tab-list i {
 position: absolute;
 bottom: 30%;
 right: 14%;
 width: 0px;
 height: 0px;
 border: 5px solid #4e4e4e;
 border-top-color: #4e4e4e;
 border-bottom-color: transparent;
 border-left-color: transparent;
 border-right-color: transparent;
}
 
.on {
 color: #f63;
 border-bottom: 2rpx solid #f63;
}
 
.on i {
 border: 5px solid #f63;
 border-top-color: #f63;
 border-bottom-color: transparent;
 border-left-color: transparent;
 border-right-color: transparent;
}
 
.swiper-box {
 display: block;
 height: 100%;
 width: 100%;
 overflow: hidden;
}
 
.swiper-box view {
 text-align: center;
}
 
.swiper-item {
 background: #fff;
 width: 100%;
 height: 600rpx;
 display: none;
 position: absolute;
 top: 100rpx;
 z-index: 333333;
 left: 0;
 animation: displays 1s;
}
 
@keyframes displays {
 from {
 height: 0px;
 }
 
 to {
 height: 600rpx;
 }
}
 
.swiper-beijing {
 width: 100%;
 height: 200%;
 background: #000;
 opacity: 0.5;
 position: absolute;
 top: 130px;
 left: 0;
 display: none;
 z-index: 888;
 animation: 1s;
}
 
 
/* 下拉切换中的切换 */
 
.nav {
 width: 20%;
 height: 100rpx;
 float: left;
 flex-direction: row;
}
 
.default {
 width: 100%;
 line-height: 100rpx;
 text-align: center;
 color: #000;
 font-weight: bold;
 font-size: 28rpx;
 overflow: hidden;
}
 
.red {
 width: 100%;
 float: right;
 line-height: 100rpx;
 text-align: center;
 color: #f63;
 font-weight: bold;
 font-size: 28rpx;
}
 
.show {
 display: block;
 text-align: center;
 line-height: 200rpx;
}
 
.hidden {
 display: none;
 text-align: center;
 line-height: 200px;
}
 
#rights {
 width: 79%;
 float: right;
 border-left: solid 1px #eee;
 font-size: 15px;
 max-height: 600rpx;
 overflow-y: auto;
 overflow-x: hidden;
}
 
/*添加class改变样式 */
 
.location_bottom {
 width: 100%;
 height: 400rpx;
 line-height: 140rpx;
 color: #d91f16;
 font-size: 28rpx;
 padding: 0 20rpx;
 align-items: center;
}
 
.add_city {
 width: 90%;
 display: block;
 height: 70rpx;
 line-height: 70rpx;
 border-bottom: 2rpx solid #ebebeb;
 color: #000;
 padding-left: 5%;
}
 
.add_adress {
 height: 70rpx;
 line-height: 70rpx;
 border-bottom: 2rpx solid #f63;
 color: #f63;
}
 
.add_adre {
 height: 70rpx;
 line-height: 70rpx;
 border-bottom: 2rpx solid #f63;
 color: #f63;
}
 
.add_citying {
 padding-left: 5%;
 height: 70rpx;
 line-height: 70rpx;
 border-bottom: 2rpx solid #f63;
 color: #f63;
}
 
.add_House {
 padding-left: 5%;
 height: 70rpx;
 line-height: 70rpx;
 border-bottom: 2rpx solid #f63;
 color: #f63;
}
 
/*// 筛选 */
 
.shaixuankuang {
 width: 100%;
 height: 600rpx;
 overflow: hidden;
 max-height: 600rpx;
 overflow-y: auto;
 overflow-x: hidden;
}
 
.shaixuan {
 width: 100%;
 height: auto;
 overflow: hidden;
}
 
.shuaixuantiaojian {
 width: 95%;
 padding: 0 2.5% 1%;
 display: block;
 font-size: 15px;
 color: #999;
}
 
.chose-txt {
 /* border-radius: 6px; */
 font-size: 26rpx;
 width: 29%;
 margin: 4px 14rpx;
 float: left;
}
 
.chose-p {
 line-height: 25px;
 width: 100%;
 height: 25px;
 text-align: center;
 float: left;
}
 
.zidingyi {
 width: 95%;
 height: 50px;
 margin: 0 auto;
 overflow: hidden;
}
 
.zidingyi span {
 float: left;
 font-size: 16px;
 line-height: 40px;
 color: #666;
 margin-right: 15rpx;
}
 
.zidingyi input {
 width: 50px;
 padding-left: 10rpx;
 float: left;
 margin-top: 10rpx;
 font-size: 15px;
 line-height: 40px;
 border: solid 1px #eee;
 color: #666;
}
 
.zidingyi p {
 float: left;
 margin: 0 15rpx;
 line-height: 40px;
 color: #666;
}
 
.zidingyi button {
 height: 28px;
 float: left;
 margin: 10rpx 0 0 25rpx;
 font-size: 13px;
 line-height: 28px;
 /* border: solid 1px #eee; */
 color: #666;
}
 
.qingkong {
 width: 95%;
 height: 40px;
 margin: 40rpx auto 30rpx;
}
 
.qingkong span {
 float: left;
 width: 35%;
 height: 33px;
 border: 1px solid #eee;
 box-sizing: border-box;
 color: #666;
 font-size: 14px;
 font-weight: 300;
 text-align: center;
 line-height: 33px;
 border-radius: 3px;
}
.qingkong p{
 float: right;
 width: 55%;
 height: 35px;
 color: #fff;
 font-size: 14px;
 font-weight: 300;
 text-align: center;
 line-height: 35px;
 background: rgba(229,65,65,0.95);
 border-radius: 3px;
}

js:

//banner
Page({
 data: {
 // 下拉菜单
 first: '区域',
 second: '售价',
 thirds: '房型',
 fours: '筛选',
 _num: 0,
 _res: 0,
 
 // 筛选
 array: [{ name: '单拍' }, { name: '亲子套餐' }, { name: '活动套餐' }, { name: '女王套餐' }],
 chaoxiang: [{ name: '单拍' }, { name: '亲子套餐' }, { name: '活动套餐' }, { name: '女王套餐' }],
 louceng: [{ name: '单拍' }, { name: '亲子套餐' }, { name: '活动套餐' }, { name: '女王套餐' }],
 zhuangxiu: [{ name: '单拍' }, { name: '亲子套餐' }, { name: '活动套餐' }, { name: '女王套餐' }],
 leibei: [{ name: '单拍' }, { name: '亲子套餐' }, { name: '活动套餐' }, { name: '女王套餐' }],
 tese: [{ name: '单拍' }, { name: '亲子套餐' }, { name: '活动套餐' }, { name: '女王套餐' }],
 paixu: [{ name: '单拍' }, { name: '亲子套餐' }, { name: '活动套餐' }, { name: '女王套餐' }],
 one: 0,
 two: 0,
 third: 0,
 four: 0,
 five: 0,
 six: 0,
 seven: 0,
 },
 isShow: true,
 currentTab: 0,
 
 // 下拉切换
 hideNav: function () {
 this.setData({
 displays: "none"
 })
 },
 // 区域
 tabNav: function (e) {
 this.setData({
 displays: "block"
 })
 this.setData({
 selected1: false,
 selected2: false,
 selected: true
 })
 if (this.data.currentTab === e.target.dataset.current) {
 return false;
 } else {
 
 var showMode = e.target.dataset.current == 0;
 
 this.setData({
 currentTab: e.target.dataset.current,
 isShow: showMode
 })
 }
 },
 // 下拉切换中的切换
 // 区域
 selected: function (e) {
 this.setData({
 selected1: false,
 selected2: false,
 selected: true
 })
 },
 selected1: function (e) {
 this.setData({
 selected: false,
 selected2: false,
 selected1: true
 })
 },
 selected2: function (e) {
 this.setData({
 selected: false,
 selected1: false,
 selected2: true
 })
 },
 // 下拉菜单1 2 3 4
 // 区域
 clickSum: function (e) {
 console.log(e.target.dataset.num)
 this.setData({
 _sum: e.target.dataset.num
 })
 this.setData({
 first: e.target.dataset.name
 })
 this.setData({
 displays: "none"
 })
 var text = this.data.name
 console.log(text)
 },
 onLoad: function (options) {
 
 },
 clickMum: function (e) {
 console.log(e.target.dataset.num)
 this.setData({
 _mum: e.target.dataset.num
 })
 this.setData({
 displays: "none"
 })
 var text = this.data.name
 console.log(text)
 },
 onLoad: function (options) {
 
 },
 clickCum: function (e) {
 console.log(e.target.dataset.num)
 this.setData({
 _cum: e.target.dataset.num
 })
 this.setData({
 displays: "none"
 })
 var text = this.data.name
 console.log(text)
 },
 onLoad: function (options) {
 
 },
 // 售价
 clickNum: function (e) {
 console.log(e.target.dataset.num)
 this.setData({
 _num: e.target.dataset.num
 })
 this.setData({
 second: e.target.dataset.name
 })
 this.setData({
 displays: "none"
 })
 var text = this.data.name
 console.log(text)
 },
 onLoad: function (options) {
 
 },
 // 房型
 clickHouse: function (e) {
 console.log(e.target.dataset.num)
 this.setData({
 _res: e.target.dataset.num
 })
 this.setData({
 thirds: e.target.dataset.name
 })
 this.setData({
 displays: "none"
 })
 },
 onLoad: function (options) {
 
 },
 
 // 筛选
 choseTxtColor: function (e) {
 var id = e.currentTarget.dataset.id; //获取自定义的ID值 
 console.log(e.currentTarget.dataset.id)
 this.setData({
 one: id
 })
 },
 chaoxiang: function (e) {
 var id = e.currentTarget.dataset.id; //获取自定义的ID值 
 this.setData({
 two: id
 })
 },
 louceng: function (e) {
 var id = e.currentTarget.dataset.id; //获取自定义的ID值 
 this.setData({
 third: id
 })
 },
 zhuangxiu: function (e) {
 var id = e.currentTarget.dataset.id; //获取自定义的ID值 
 this.setData({
 four: id
 })
 },
 leibei: function (e) {
 var id = e.currentTarget.dataset.id; //获取自定义的ID值 
 this.setData({
 five: id
 })
 },
 tese: function (e) {
 var id = e.currentTarget.dataset.id; //获取自定义的ID值 
 this.setData({
 six: id
 })
 },
 paixu: function (e) {
 var id = e.currentTarget.dataset.id; //获取自定义的ID值 
 this.setData({
 seven: id
 })
 }
})

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
js实现图片轮播效果
Dec 19 Javascript
JS功能代码集锦
May 04 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
javascript中this用法实例详解
Apr 06 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
简单实现jQuery弹窗效果
Oct 30 jQuery
关于JavaScript语句后面的分号问题
Dec 07 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 #Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 #Javascript
浅谈React碰到v-if
Nov 04 #Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 #Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 #Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 #Javascript
微信小程序实现笑脸评分功能
Nov 03 #Javascript
You might like
PHP实现简单爬虫的方法
2015/07/29 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
删除重复数据的算法
2006/11/23 Javascript
JavaScript delete操作符应用实例
2009/01/13 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
Python版微信红包分配算法
2015/05/04 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
Python使用tkinter实现小时钟效果
2021/02/22 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
大学生毕业自我鉴定
2013/11/06 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
《穷人》教学反思
2016/02/19 职场文书