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


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 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
javascript动画效果类封装代码
Aug 28 Javascript
Prototype Class对象学习
Jul 19 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
详解vue 命名视图
Aug 14 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安全配置
2006/12/06 PHP
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
php数组使用规则分析
2015/02/27 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
js跳转页面方法总结
2014/01/29 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
使用python解析xml成对应的html示例分享
2014/04/02 Python
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
python实现的解析crontab配置文件代码
2014/06/30 Python
零基础写python爬虫之抓取百度贴吧代码分享
2014/11/06 Python
celery4+django2定时任务的实现代码
2018/12/23 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
Wallis官网:英国女装零售商
2020/01/21 全球购物
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
个人担保书格式范文
2014/05/12 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
英语教学课后反思
2016/02/15 职场文书
MySQL如何解决幻读问题
2021/08/07 MySQL
MySQL Server 层四个日志
2022/03/31 MySQL
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android