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


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代码
Sep 17 Javascript
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
ExtJS扩展 垂直tabLayout实现代码
Jun 21 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 Javascript
Element-UI 使用el-row 分栏布局的教程
Oct 26 Javascript
JavaScript模拟实现网易云轮播效果
Apr 04 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
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
jquery 简单导航实现代码
2009/09/11 Javascript
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
python+pyqt实现12306图片验证效果
2017/10/25 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
自主招生自荐书
2013/11/29 职场文书
如何写早恋检讨书
2014/09/10 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
会议欢迎词范文
2015/01/27 职场文书
阿凡达观后感
2015/06/10 职场文书
青涩记忆观后感
2015/06/18 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫
DIY胆机必读:各国电子管评价
2022/04/06 无线电