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

微信小程序 下拉列表

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(){
  // 页面关闭
 }
})
  

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

时间: 2017-03-07

微信小程序(六):列表上拉加载下拉刷新示例

1.列表(本部分内容出入官方文档) 对于这个功能,微信小程序中并没有提供类似于Android中listview性质的控件,所以我们需要使用 wx:for 控制属性绑定一个数组,用数组中各项的数据重复渲染该组件,来达到列表的效果. <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> Page({ data: { array: [{ message: 'foo', }, { message: '

微信小程序 下拉菜单的实现

微信小程序 下拉菜单 看下实现效果图: 实例: //wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-botto

微信小程序 下拉菜单简单实例

微信小程序 下拉菜单简单实例 wcss  /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px sol

微信小程序 详解下拉加载与上拉刷新实现方法

微信小程序下拉刷新上拉加载的两种实现方法 实现效果图: 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性             属性   类型                           描述 enablePullDownRefresh Boolean 是否开启下拉刷新,详见页面相关事件处理函数. 设置js里onPullDownRefresh和onReachBottom方法 属性    类

微信小程序 列表的上拉加载和下拉刷新的实现

微信小程序可谓是9月21号之后最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会让移动端App颠覆,让移动端的程序员失业,身为一个Android开发者我是不相信的,即使有,那也是需要个一两年的过度和打磨才能实现的吧. 不管微信小程序是否能颠覆当今的移动开发格局,我们都要积极向上的心态去接收,去学习.不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具.那么接下来就让我们来开始学习列表的上拉加载和下拉刷新的实现吧(通过聚合数据

微信小程序 scroll-view实现上拉加载与下拉刷新的实例

微信小程序 scroll-view实现上拉加载与下拉刷新的实例 实现效果图: 如图,使用小程序的scroll-view实现的上拉加载数据,下拉刷新数据,试下代码如下: js文件代码: var url = "http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action"; var page = 1; var GetList = function (that) { that.setData({ hidden: false }); wx.r

微信禁止下拉查看URL的处理方法

场景: 微信下拉时可以查看到URL,本身是微信的一种安全策略之一,也是一种用户交互友好的体验: 效果原理: 微信下拉弹性效果其实是浏览器本身的一种特性,重点就是scroll值的一种体现: 处理策略: 1.直接禁止mobile端的touchmove事件: 这种策略一般适用页面只有一屏不需要下拉情况下使用: var touch1 = function(){ document.querySelector('body').addEventListener('touchmove', function (e

详解微信小程序开发之下拉刷新 上拉加载

微信小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善. 上gif: 原理: scroll-view中有监听滑动的方法,这个跟Android类似.其中用到了滑动到顶部,滑动到底部的方法. 1.下拉刷新,在滑动到顶部时,bindscrolltoupper被调用,根据自己的业务逻辑请求即可.我的demo只是随机换了个关键字. 2.上拉加载,在滑动到底部时,bindscrollto

详解微信小程序开发用户授权登陆

本篇将帮助读者实现基于 微信开发者工具 & C#环境 下的用户在小程序上的授权登陆. 准备: 微信开发者工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 微信小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/index.html 开发: 在开发之初,我们需要先明确微信方已经制定好的授权登陆流程,参看 官方API - 登陆接口.

详解微信小程序开发(项目从零开始)

一.序 微信小程序,估计大家都不陌生,现在应用场景特别多.今天就系统的介绍一下小程序开发.注意,这里只从项目代码上做解析,不涉及小程序如何申请.打包.发布的东西.(这些跟着微信官方文档的流程走就好).好了废话不多说,看目录. 注: 小程序是一套特殊的东西,融合了原生和web端.他是一个不完整的浏览器对象,所以很多DOM . BOM 的东西无法使用,但是他又通过微信APP实现了多线程. 二.如何创建小程序 很简单,首先下载微信开发者工具,下载稳定版本的就好. 下载 然后,创建小程序,可以参考下述图

详解微信小程序开发聊天室—实时聊天,支持图片预览

第一次写小程序,老板就让我用websoket写个聊天对话,群聊这种.第一次写聊天功能,第一次用websoket,第一次用小程序,这是在考验我吗?不过我还是研究了一下,终于实现了. 首先看一下界面,界面很简单,就是首页刚进来获取了用户信息头像,昵称等.点击进入聊天室就可以聊天了,下面我介绍的是前端代码实现,后台需要做的很简单,就是你给他发送什么数据,他就给你返回什么数据,就是在接收前台发送过来的图片的时候需要做个格式转换,因为有时候前端将接收到的json字符串转换json对象的时候,遇到有特殊的标

详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能

微信小程序在12月21日发布了新版本的开发工具,并在官网公布新增分享.模板消息.客服消息.扫一扫.带参数二维码功能. 有了分享功能,相信会给很多创业者带来了无限的可能性! 下面就来看看这些新功能到底怎么用吧! 1.分享 可以分享小程序的任何一个页面给好友或群聊.注意是分享给好友或群聊,并没有分享到朋友圈.一方面微信在尝试流量分发方式,但同时又不愿意开放最大的流量入口. 开发文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/share.html?t=

详解微信小程序开发之城市选择器 城市切换

移动开发中城市选择器必不可少. 空白造了个. gif: 这里只上部分js代码: var city = require('../../utils/city.js'); Page({ data: { searchLetter: [], showLetter: "", winHeight: 0, tHeight: 0, bHeight: 0, startPageY: 0, cityList: [], isShowLetter: false, scrollTop: 0, city: "

详解微信小程序开发之——wx.showToast(OBJECT)的使用

wx.showToast API是显示消息提示框的作用. 先让我们看一下官方的文档说明: 注意:其中的图标,只支持"success"."loading" 示例代码: wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) 接下来演示如何使用,先打开微信web开发者工具,新建快速项目,删除掉首页没用的内容,保留如下部分. 添加两个按钮,同事添加点击事件.再在按钮上添加navigator导航,链接到默

详解微信小程序胶囊按钮返回|首页自定义导航栏功能

项目代码:https://github.com/Shay0921/header-navbar.git 在小程序中,从转发出来的小程序消息卡片进入,因为页面栈中只有一个,所以不会出现返回按钮,对于一些电商平台来说,当商品被转发后会很影响客户查看其它产品和首页,这时候就需要使用自定义导航栏自己写一个"胶囊按钮".如下图所示: 从别的页面点到商品页时会有返回和首页按钮: 当从分享页进入到商品页时,因为页面栈只有一个,所以只有首页按钮: 首先我们需要如何开启自定义导航栏,查看手册后会发现一个页

详解微信小程序 登录获取unionid

详解微信小程序 登录获取unionid 首先公司开发了小程序, 公众号网页和app等, 之前都是用的openid来区分用户, 但openid只能标识用户在当前小程序或公众号里唯一, 我们希望用户可以在公司各个产品(比如公众号, 小程序, app里的微信登录)之间, 可以保持用户的唯一性, 还好微信给出了unionid. 下面分两步介绍一下 微信小程序 获取unionid的过程. 1. 首先 在微信公众平台注册小程序 , 然后在小程序上模拟登录流程. 注 : 这里只是简单登录流程, 实际中需要维护

详解微信小程序 通过控制CSS实现view隐藏与显示

详解微信小程序 通过控制CSS实现view隐藏与显示 实现效果图: 视图代码,使用变量控制隐藏类名 <scroll-view scroll-y="true" > <view class="user_freeback"> <view class="txt"> <text> 为了更好地帮助您解决问题,请准确填写您的邮箱地址和电话号码,以便管理员给你答复.</text> </view&g