微信小程序 下拉列表的实现实例代码


Posted in Javascript onMarch 08, 2017

微信小程序 下拉列表

wxml代码:

<view class="phone_one" bindtap="clickPerson">
 <view class="phone_personal">{{firstPerson}}</view>
 <image src="../../image/v6.png" class="personal_image {{selectArea ? 'rotateRight' :''}}"></image> //三目法判断图片要不要旋转180。
 </view>
 
<view class="person_box">
  <view class="phone_select" hidden="{{selectPerson}}">
  <view class="select_one" bindtap="mySelect" data-me="你好">你好</view>
  <view class="select_one" bindtap="mySelect" data-me="他好">他好</view>
  <view class="select_one" bindtap="mySelect" data-me="大家好">大家好</view>
 </view>
 </view>

wxss代码:

.phone_personal{
  width: 100%;
  color:rgb(34, 154, 181);
  height:100rpx;
  line-height:100rpx;
  text-align: center;
}
.phone_one{
  display: flex; //用flex布局更方便。
  position: relative;
  justify-content: space-between;
  background-color:rgb(239, 239, 239);
  width:90%;
  height:100rpx;
  margin:0 auto;
  border-radius: 10rpx;
  border-bottom:2rpx solid rgb(255, 255, 255);
}
.person_box{
  position: relative;
}
.phone_select{
  margin-top:0;
  z-index: 100;
  position: absolute; //小程序中z-index和absolute需要同时存在,元素才能脱离文档。
}
.select_one{
  text-align: center;
  background-color:rgb(239, 239, 239);
  width:676rpx;  //脱离文档后元素width不能再用百分比。
  height:100rpx;
  line-height:100rpx;
  margin:0 5%;
  border-bottom:2rpx solid rgb(255, 255, 255);
}
.personal_image{
  z-index: 100;
  position: absolute;
  right:2.5%;
  width: 34rpx;
  height: 20rpx;
  margin:40rpx 20rpx 40rpx 0;
  transition: All 0.4s ease; 
  -webkit-transition: All 0.4s ease;
}
.rotateRight{
  transform: rotate(180deg); //180°旋转图片。
}

 js代码:

Page({
 data:{
  selectPerson:true,
  firstPerson:'个人',
  selectArea:false,
  },
 //点击选择类型
 clickPerson:function(){
  var selectPerson = this.data.selectPerson;
  if(selectPerson == true){
   this.setData({
   selectArea:true,
   selectPerson:false,
 })
  }else{
   this.setData({
   selectArea:false,
   selectPerson:true,
 })
  }
 } ,
 //点击切换
 mySelect:function(e){
  this.setData({
   firstPerson:e.target.dataset.me,
   selectPerson:true,
   selectArea:false,
  })
 },
 onLoad:function(options){
  // 页面初始化 options为页面跳转所带来的参数
 },
 onReady:function(){
  // 页面渲染完成
 },
 onShow:function(){
  // 页面显示
 },
 onHide:function(){
  // 页面隐藏
 },
 onUnload:function(){
  // 页面关闭
 }
})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript字典探测用户名工具
Oct 05 Javascript
用 JavaScript 迁移目录
Dec 18 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
js编写一个简单的产品放大效果代码
Jun 27 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
electron踩坑之remote of undefined的解决
Oct 06 Javascript
js实现五星评价功能
Mar 08 #Javascript
ionic2 tabs 图标自定义实例
Mar 08 #Javascript
微信小程序 弹窗自定义实例代码
Mar 08 #Javascript
jQuery实现图片滑动效果
Mar 08 #Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 #Javascript
JS实现根据密码长度显示安全条功能
Mar 08 #Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 #Javascript
You might like
快速开发一个PHP扩展图文教程
2008/12/12 PHP
解析PHP的session过期设置
2013/06/29 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
php实现word转html的方法
2016/01/22 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
基于jquery的分页控件(C#)
2011/01/06 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
js实现股票实时刷新数据案例
2017/05/14 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
说明书范文
2014/05/07 职场文书
个人作风建设总结
2014/10/23 职场文书
2014年租房协议书范本
2014/10/30 职场文书
高中教师个人总结
2015/02/10 职场文书
中学音乐课教学反思
2016/02/18 职场文书
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android