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


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 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
Javascript的构造函数和constructor属性
Jan 09 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
vue生成token并保存到本地存储中
Jul 17 Javascript
解决bootstrap-select 动态加载数据不显示的问题
Aug 10 Javascript
vue使用v-for实现hover点击效果
Sep 29 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
Nov 09 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返回json数据函数实例
2014/10/09 PHP
详解PHP的Yii框架中自带的前端资源包的使用
2016/03/31 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
基于jQuery的自动完成插件
2011/02/03 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
python任务调度实例分析
2015/05/19 Python
python中函数默认值使用注意点详解
2016/06/01 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
Hotels.com越南:酒店预订
2019/10/29 全球购物
机电专业大学生职业规划书范文
2014/02/25 职场文书
生产车间标语
2014/06/11 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript