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


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 相关文章推荐
JS的数组的扩展实例代码
Jul 09 Javascript
jQuery aminate方法定位到页面具体位置
Dec 26 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
react native 文字轮播的实现示例
Jul 27 Javascript
使用Sonarqube扫描Javascript代码的示例
Dec 26 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
在vue中使用echars实现上浮与下钻效果
Nov 08 Javascript
详细分析Node.js 多进程
Jun 22 Javascript
详解js中的几种常用设计模式
Jul 16 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字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
深入分析PHP设计模式
2020/06/15 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
javascript call和apply方法
2008/11/24 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
使用python将多个excel文件合并到同一个文件的方法
2019/07/09 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
中国网上药店领导者:1药网
2017/02/16 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
《春天来了》教学反思
2014/04/07 职场文书
网络优化专员求职信
2014/05/04 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android