微信小程序下拉框选择

最新推荐文章于 2024-08-06 09:03:34 发布

置顶 Faaaaaaq

最新推荐文章于 2024-08-06 09:03:34 发布

阅读量3.2k

点赞数 6

文章标签：小程序 css

本文链接：https://blog.csdn.net/fanganqing/article/details/115770035

版权

在这里插入图片描述

wxml代码

<view class='top-selected' bindtap='bindShowMsg'>
  <text>{{grade_name}}</text>
</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>

js代码

Page({
  data: {
    select:false,
    grade_name:'--请选择--',
    grades: [
      '北京市',
      '深圳市',
      '上海市',
      '广州市',
     ]
  },
    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
      })
    },  
 })

wxss代码

/* 顶部 */
.top{
  width: 400rpx ;
  height: 80rpx;
  padding: 0 20rpx;
  border: 1px solid;
  line-height: 80rpx;
  font-size: 34rpx;
  border-bottom: 1px solid #000;
 }

 /* 下拉框 */
 .top-selected{
  width: 100px;
  border: 1px solid #ccc;
  padding: 0 10rpx;
 }
 /* 下拉内容 */
 .select_box {
  background-color: #fff;
  width: 100px;
  position: relative;
  right: 0;
  z-index: 1;
  text-align: left;
  font-size: 30rpx;
 }
 .select_one {
   padding-left: 20rpx;
   width: 100%;
   height: 60rpx;
   position: relative;
   line-height: 60rpx;
   border: 1px solid #ccc;
 }