ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

微信小程序 下拉选择

2021-04-06 20:01:13  阅读:142  来源: 互联网

标签:box index show 微信 程序 选择 selectData border select


<view class='select_box'>
  <view class='select' catchtap='selectTap'>
    <text class='select_text'>{{selectData[index]}}</text>
    <image class='select_img {{show&&"select_img_rotate"}}' src='/image/gobottom.png'></image>
  </view>
  <view class='option_box' style='height:{{show?(selectData.length>5?300:selectData.length*60):0}}rpx;'>
    <text class='option' style='{{index==selectData.length-1&&"border:0;"}}' wx:for='{{selectData}}' wx:key='this'
      data-index='{{index}}' catchtap='optionTap'>{{item}}</text>
  </view>
</view>
page{
  background: #f3f7f7;
 }
 .select_box{
  background: #fff;
  width: 160rpx;
  margin: 30rpx auto;
  position: relative;
 }
 .select{
  box-sizing: border-box;
  width: 100%;
  height: 70rpx;
  border:1px solid #efefef;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
 }
 .select_text{
  font-size: 30rpx;
  flex: 1;
 }
 .select_img{
  width: 40rpx;
  height: 40rpx;
  display: block;
  transition:transform 0.3s;
 }
 .select_img_rotate{
  transform:rotate(180deg); 
 }
 .option_box{
  position: absolute;
  top: 70rpx;
  width: 100%;
  border:1px solid #efefef;
  box-sizing: border-box;
  height: 0;
  overflow-y: auto;
  border-top: 0;
  background: #fff;
  transition: height 0.3s;
 }
 .option{
  display: block;
  line-height: 40rpx;
  font-size: 30rpx;
  border-bottom: 1px solid #efefef;
  padding: 10rpx;
 }
Page({

  data: {
    show: false,//控制下拉列表的显示隐藏,false隐藏、true显示
    selectData: ['1', '2', '3', '4', '5', '6'],//下拉列表的数据
    index: 0//选择的下拉列表下标
  },
  // 点击下拉显示框
  selectTap() {
    this.setData({
      show: !this.data.show
    });
  },
  // 点击下拉列表
  optionTap(e) {
    let Index = e.currentTarget.dataset.index;//获取点击的下拉列表的下标
    console.log(Index)
    this.setData({
      index: Index,
      show: !this.data.show
    });
  },
  onl oad: function (options) {

  }

})

参考:
https://www.jb51.net/article/165418.htm

标签:box,index,show,微信,程序,选择,selectData,border,select
来源: https://blog.csdn.net/zx77588023/article/details/115468842

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有