微信小程序下拉框

番茄西红柿发布于2019-04-23 13:13 / 2863人阅读

摘要：微信小程序组件里没有下拉框，正好要用到，记下来以后参考代码选择接收班级下拉框下拉需要显示的列表代码顶部下拉框下拉内容下拉过度效果下拉图标代码页面的初始数据请选择猛犸机器人班猛犸机器人班口才班点击下拉框已选下拉框效果

微信小程序组件里没有下拉框，正好要用到，记下来以后参考

wxml代码

<view class=top>
    <view class=top-text> 选择接收班级view>
    
    <view class=top-selected bindtap=bindShowMsg>
      <text>{{grade_name}}text>
      <image src=/images/icon/down.png>image>
    view>
    
    <view class="select_box" wx:if="{{select}}">
      <view wx:for="{{grades}}" wx:key="unique">
        <view class="select_one" bindtap="mySelect" data-name="{{item}}">{{item}}view>
      view>
    view>
  view>

wxss代码

/* 顶部 */
.top{
  width: 100vw;
  height: 80rpx;
  padding: 0 20rpx;
  line-height: 80rpx;
  font-size: 34rpx;
  border-bottom: 1px solid #000;
}
.top-text{
  float: left
}
/* 下拉框 */
.top-selected{
    width: 50%;
    display: flex;
    float: right;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ccc;
    padding: 0 10rpx;
    font-size: 30rpx;
}
/* 下拉内容 */
.select_box {
    background-color: #fff;
    padding: 0 20rpx;
    width: 50%;
    float: right;
    position: relative;
    right: 0;
    z-index: 1;
    overflow: hidden;
    text-align: left;
    animation: myfirst 0.5s;
    font-size: 30rpx;
}
.select_one {
    padding-left: 20rpx;
    width: 100%;
    height: 60rpx;
    position: relative;
    line-height: 60rpx;
    border-bottom: 1px solid #ccc;
}
/* 下拉过度效果 */
@keyframes myfirst {
    from {
        height: 0rpx;
    }
 
    to {
        height: 210rpx;
    }
}
/* 下拉图标 */
.top-selected image{
  height:50rpx;
  width:50rpx;
  position: absolute;
  right: 0rpx;
  top: 20rpx;
}

js代码

 /**
   * 页面的初始数据
   */
  data: {
    select:false,
    grade_name:--请选择--,
    grades: [
        猛犸机器人1班,
        猛犸机器人2班,
        口才1班,
      ]
  },/**
 *  点击下拉框
 */
  bindShowMsg() {
    this.setData({
      select: !this.data.select
    })
  },
/**
 * 已选下拉框
 */
  mySelect(e) {
    console.log(e)
    var name = e.currentTarget.dataset.name
    this.setData({
      grade_name: name,
      select: false
    })
  },

效果

云服务器 GPU云服务器微信小程序微信小程序支付微信小程序部署微信小程序搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1593.html

微信小程序下拉框组件运用方法

　　在项目开发中，会要求在小程序有时使用下拉框选项。在通常思路就是用 picker 组件实现。pick 组件使用 mode 来区分类别，默认使用普通选择器就行。　　还有另一个方法就是可以通过自定义组件实现，代码如下：　　//index.js 　　Component({ 　　/** 　　*组件的属性列表　　*/ 　　properties:{ 　　propArray:{ 　　type:Array, ...

3403771864 2022-11-06 16:56 评论0 收藏0
微信小程序禁止弹框底部内容滑动

摘要：网友们的方法网友们有人使用的方式是给绑定一个空方法。这也是一个解决方法。友情提醒关于不能滚动的这个效果需要在真机上面查看，在编辑器上面看不到效果。本文首发于公众号前端的极致实现。欢迎小可爱们来交流加我微信拉大家进群我们需要解决的问题：当弹框显示的时候，弹框下面的内容不能滚动小程序的弹框特别多,像下面这样，弹框的底部是一个可以下拉的页面，但是当弹框出现的时候，需要禁止底部的滚动，那么...

terro 2019-08-26 10:22 评论0 收藏0
微信小程序教学第三章第四节（含视频）：小程序中级实战教程：下拉更新、分享、阅读标识

摘要：下拉更新分享阅读标识本文配套视频地址开始前请把分支中的目录导入微信开发工具这一篇中，我们把列表这块的剩余功能做完下拉更新分享阅读标识。下拉更新、分享、阅读标识本文配套视频地址：https://v.qq.com/x/page/h0554... 开始前请把 ch3-4 分支中的 code/ 目录导入微信开发工具这一篇中，我们把列表这块的剩余功能做完：下拉更新、分享、阅读标识。 ...

caoym 2019-08-30 13:50 评论0 收藏0
微信小程序教学第三章第四节（含视频）：小程序中级实战教程：下拉更新、分享、阅读标识

摘要：下拉更新分享阅读标识本文配套视频地址开始前请把分支中的目录导入微信开发工具这一篇中，我们把列表这块的剩余功能做完下拉更新分享阅读标识。下拉更新、分享、阅读标识本文配套视频地址：https://v.qq.com/x/page/h0554... 开始前请把 ch3-4 分支中的 code/ 目录导入微信开发工具这一篇中，我们把列表这块的剩余功能做完：下拉更新、分享、阅读标识。 ...

neroneroffy 2019-08-22 11:13 评论0 收藏0
微信小程序教学第三章第四节（含视频）：小程序中级实战教程：下拉更新、分享、阅读标识

摘要：下拉更新分享阅读标识本文配套视频地址开始前请把分支中的目录导入微信开发工具这一篇中，我们把列表这块的剩余功能做完下拉更新分享阅读标识。下拉更新、分享、阅读标识本文配套视频地址：https://v.qq.com/x/page/h0554... 开始前请把 ch3-4 分支中的 code/ 目录导入微信开发工具这一篇中，我们把列表这块的剩余功能做完：下拉更新、分享、阅读标识。 ...

chemzqm 2019-08-01 17:52 评论0 收藏0