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


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实现的类似Google的Div拖动效果代码
Aug 09 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
Iframe 自动适应页面的高度示例代码
Feb 26 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
ES6中Array.includes()函数的用法
Sep 20 Javascript
axios post提交formdata的实例
Mar 16 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
Vue监听页面刷新和关闭功能
Jun 20 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 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
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
PHP代码保护--Zend Guard的使用详解
2013/06/03 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
js的逻辑运算符 ||
2010/05/31 Javascript
jquery tab插件制作实现代码
2010/06/22 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
跟老齐学Python之永远强大的函数
2014/09/14 Python
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
私有程序集与共享程序集有什么区别
2013/04/05 面试题
自荐信如何制作?
2014/02/21 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android