精华内容
下载资源
问答
  • 微信小程序下拉选择框

    千次阅读 2019-07-30 16:59:55
    一般来说的话,总有点需要下拉并且能够搜索选择的需求。 首先wxml <!-- 下拉菜单 --> <view class='menu-po'> <!-- 请选择 --> <view class='menu'> <view class='menu-list'> ...
    	一般来说的话,总有点需要下拉并且能够搜索选择的需求。
    

    首先wxml

    <!-- 下拉菜单   -->
        <view class='menu-po'>
          <!-- 请选择 -->
          <view class='menu'>
            <view class='menu-list'>
              <view class="{{item.key==menuNums&&openPicker?'menu-nav2':'menu-nav'}}" wx:for="{{ msgList }}" wx:for-index="idx" data-key='{{item.key}}' wx:key="key" data-hi="{{ idx }}" data-name='{{item.name}}' bindtap="menuClick">
                <text class='menu-text'>{{ item.name }}</text>
                <image class='menu-image' src='/pages/img/pull.png'></image>
              </view>
            </view>
          </view>
          <!-- 列表栏 -->
          <view class='menu-if'>
            <!-- 区域 -->
            <view class="meun-txt over-auto" hidden='{{ meunShow[0].isShows ? true : false }}'>
              <scroll-view scroll-y="true" style="height: 446rpx">
                <text wx:for="{{ sousuoList }}" data-id="{{item.id}}" class='meun-city-txt meun-city-txt-price' bindtap='souSearch' data-name='{{item.name}}'>{{ item.name }}</text>
              </scroll-view>
            </view>
    
          </view>
        </view>
    

    其次是wxss

    .menu-po {
      position: relative;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: 25%;
      margin-left: 5%;
      display: inline-block;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    
    .menu-list {
      display: flex;
      justify-content: space-between;
    }
    
    .menu-nav {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .menu-nav2 {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .menu-nav2 image {
      width: 24rpx;
      height: 15rpx;
    }
    
    .menu-nav2 text {
      font-size: 14px;
    }
    
    .menu-nav image {
      width: 24rpx;
      height: 15rpx;
    }
    
    .menu-nav text {
      color: #696969;
      font-size: 14px;
    }
    
    .shadow {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
      z-index: 1;
      position: absolute;
      top: 210rpx;
    }
    
    .menu-if {
      background-color: #fff;
      box-sizing: border-box;
      position: absolute;
      z-index: 9;
      margin-left: -15px;
      width: 100%;
    }
    
    .swiper-item {
      background: #fff;
      width: 100%;
      height: 600rpx;
      display: none;
      position: absolute;
      top: 100rpx;
      z-index: 333333;
      left: 0;
      animation: displays 1s;
    }
    
    .meun-txt {
      height: auto;
      color: #696969;
    }
    
    .menu-text-list {
      position: relative;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }
    
    .menu-text-list-left {
      width: 100%;
      background-color: #fff;
      box-sizing: border-box;
      padding-left: 35rpx;
    }
    
    /* text样式 */
    
    .meun-city-txt {
      display: block;
      border-bottom: 1rpx solid #e9e9e9;
      width: 100%;
      padding: 25rpx 0;
      font-size: 14px;
    }
    
    .meun-city-txt-price {
      display: flex;
      justify-content: center;
    }
    
    .menu-text-list-rig {
      width: 50%;
      position: absolute;
      top: 0;
      right: 0;
      background-color: #f9f9f9;
      z-index: 10;
      box-sizing: border-box;
      padding-left: 35rpx;
    }
    
    
    

    最后是js文件

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        msgList: [{
          key: 1,
          name: '请选择'
        }],
        // 判断导航栏列表是否显示
        meunShow: [{
          isShows: true
        }],
        sousuoList: [{
          id: 1,
          name: '新房'
        }, {
          id: 2,
          name: '二手房'
        }, {
          id: 3,
          name: '写字楼'
        }, {
          id: 4,
          name: '商铺'
        }, {
          id: 5,
          name: '出租'
        }],
      },
      souSearch: function (e) {
        var that = this;
        var openPicker = this.data.openPicker;
        var house_name = e.target.dataset.name;
    
        var msgList = that.data.msgList;
        this.setData({
          openPicker: !openPicker,
        })
        for (var i = 0; i < msgList.length; i++) {
          var keys = msgList[i].key;
          if (keys == 1) {
            msgList[i].name = house_name;
            that.setData({
              msgList: msgList,
              house_name: house_name
            })
          }
        }
    
    
        var menuNum = that.data.menuNum;
        var meunShow = this.data.meunShow;
        var menuSrc = "meunShow[" + menuNum + "].isShows";
        // console.log('menuNum:' + menuNum);
        for (var n = 0; n < meunShow.length; n++) {
          // 拼接 ,使我们可以获取到menuShow里面每一个isSHows
          var menuSrcs = meunShow[n].isShows;
          // console.log('menuSrcs:' + menuSrcs);
          // 解决重复点击不能隐藏的问题
          if (n != menuNum) {
    
            this.setData({
              menuSrcs: true
            });
          };
        };
    
        // 给当前点击的去反data中设置的meunShow,使之显示, 只写此处只会显示不能隐藏
        this.setData({
          [menuSrc]: !this.data.meunShow[menuNum].isShows
        });
    
      },
    
      menuClick: function (e) {
        // 获取通过wxml  data-hi="{{ idx }}" 传过来的索引
        var that = this;
        var menuNum = e.currentTarget.dataset.hi;
        that.setData({
          menuNum: menuNum
        })
        var name = e.currentTarget.dataset.name;
        if (name == that.data.name) {
          // console.log('==');
          that.setData({
            openPicker: !this.data.openPicker,
          })
        } else {
          // console.log('!=');
          that.setData({
            openPicker: true,
          })
        }
    
        that.setData({
          name: name
        })
        // console.log(name + ',' + menuNum);
        // 拼接 ,使我们可以获取到menuShow里面每一个isSHows
        var menuSrc = "meunShow[" + menuNum + "].isShows";
        // console.log('picker:' + this.data.openPicker);
        this.setData({
          needAnimation: true,
          menuNums: menuNum + 1
        });
    
        // 循环data中设置的meunShow
        for (var n = 0; n < this.data.meunShow.length; n++) {
          // 拼接 ,使我们可以获取到menuShow里面每一个isSHows
          var menuSrcs = "meunShow[" + n + "].isShows";
          // 解决重复点击不能隐藏的问题
          if (n != menuNum) {
            // 初始化,每次点击时先全部隐藏,但是重复点击不会隐藏
            this.setData({
              [menuSrcs]: true
            });
          };
        };
    
        // 给当前点击的去反data中设置的meunShow,使之显示, 只写此处只会显示不能隐藏
        this.setData({
          [menuSrc]: !this.data.meunShow[e.currentTarget.dataset.hi].isShows
        });
      },
      })
    

    这就是下拉选择框的全部代码了。

    展开全文
  • 自定义微信小程序下拉选择框组件

    万次阅读 2018-09-21 21:54:45
    自定义微信小程序下拉选择框组件如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能...

    预览效果图:↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    预览效果

    ========================================================

    首先要新建一个组件

    1.在想要的位置上新建一个目录
    在这里插入图片描述
    2.在该目录中 右键 → 新建一个Component
    工具会自动生成四个文件(无视assets,那是我放图片的地方)
    在这里插入图片描述
    其中我们一般修改 .js .wxml .wxss 文件

    3.观察select.json文件
    “component”: true 这句话表示这个目录是作为一个组件的,可以给别的目录用
    在这里插入图片描述

    ========================================================

    开始编码

    selector.wxml

    <view class='selectBox'> 
      <view class='select' catchtap='selectTap'> 
        <text class='select_text'>{{selectData[index]}}</text> 
        <image class='select_img {{selectShow&&"select_img_rotate"}}' 
               src='../selector/assets/jiantou.jpg' 
               background-size="contain">
        </image> 
      </view> 
    
      <view class='optionBox'
      		style='height:300rpx;'>     
      	<text class='option' 
              wx:for='{{selectData}}' 
              wx:key='this' 
              data-index='{{index}}' 
              catchtap='optionTap'>{{item}}
        </text> 
      </view> 
    </view>
    

    ========================================================
    selector.wxss(要改的样式可以自己改)

    .selectBox{ height:1.5rem;border:2px solid black;border-radius: 20rpx; position: relative; padding-left: 10rpx} 
    .selectBox .select{ box-sizing: border-box; width: 100%; height: 100%; border-radius: 8rpx; display: flex; align-items: center; padding: 0 10rpx; } 
    .selectBox .select .select_text{ font-size: 35rpx; color:black; line-height: 28rpx; flex: 1; } 
    .selectBox .select .select_img{ width: 30rpx; height: 30rpx; display: block; transition:transform 0.3s; }
     .selectBox .select .select_img_rotate{ transform:rotate(180deg); } 
    .selectBox .optionBox{ position: absolute; top: calc(100%); width: 100%; box-sizing: border-box; height: 0; overflow-y: auto; background: #fff; transition: height 0.3s; border-left:2px solid black; border-right:2px solid black;border:1px solid black ;z-index:9999} 
    .selectBox .optionBox .option{ display: block; line-height: 50rpx; font-size: 35rpx; border-top: 2px solid black; padding: 10rpx;z-index:9999;} 
    

    =======================================================
    selector.js

    Component({
      /**
       * 组件的属性列表
       */
      properties: {
        selectData: { //下拉列表的数据
          type: Array,
          value: [] //初始数据,可通过属性修改
        },
      },
    
      /**
       * 组件的初始数据
       */
      data: {
        selectShow: false,//控制下拉列表的显示隐藏,false隐藏、true显示
        index: 0,//选择的下拉列表下标
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
        selectTap() {
          this.setData({
            selectShow: !this.data.selectShow
          });
        },
        optionTap(e){
          let Index=e.currentTarget.dataset.index;
          this.setData({
            index:Index,
            selectShow:!this.data.selectShow
          });
        }
      }
    })
    

    ========================================================

    定义完了组件,开始使用

    1.首先在要使用的地方的.json文件中声明用到了该组件

    {
      "usingComponents": {
        "selector":"/pages/selector/selector"
      }
    }
    

    2.直接使用组件标签(selectData定义为属性,可以自定义可选的列表)

         <selector selectData="{{position}}"></selector>
    

    OK,大功告成!
    附上我的箭头图片 ↓↓↓↓
    箭头

    展开全文
  • //选择下拉列表下标 }, // 点击下拉显示 selectTap() { this .setData({ show: ! this .data.show }); }, // 点击下拉列表 optionTap(e) { let Index = e.currentTarget.dataset.index; //...

    index.html

    <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>         
        </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>

    index.wxss

    page{
      background: #f3f7f7;
    }
    .select_box{
      background: #fff;
      width: 80%;
      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;
    }

    index.js

    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;//获取点击的下拉列表的下标
        this.setData({
          index: Index,
          show: !this.data.show
        });
      },
      onLoad: function (options) {
    
      }
    
    })
    展开全文
  • 微信小程序下拉选项

    万次阅读 2019-02-18 11:55:06
    效果图 test.js /** * 页面的初始数据 */ data: { shows: false, //控制下拉列表的显示隐藏,false隐藏、true显示 selectDatas: ['消费... indexs: 0, //选择下拉列 表下标, }, // 点击下拉显示 s...

    效果图
    在这里插入图片描述
    在这里插入图片描述
    test.js

    /**
       * 页面的初始数据
       */
      data: {
        shows: false, //控制下拉列表的显示隐藏,false隐藏、true显示
        selectDatas: ['消费账户', '平台返利账户', '微信钱包'], //下拉列表的数据
        indexs: 0, //选择的下拉列 表下标,
      },
    
      // 点击下拉显示框
      selectTaps() {
        this.setData({
          shows: !this.data.shows,
        });
      },
      // 点击下拉列表
      optionTaps(e) {
        let Indexs = e.currentTarget.dataset.index; //获取点击的下拉列表的下标
        console.log(Indexs)
        this.setData({
          indexs: Indexs,
          shows: !this.data.shows
        });
    
      },
    
    

    test.wxml

    <view class='fenlei'>
      <text>地址</text>
      <!-- 下拉框 -->
        <view class='select_box'>
          <view class='select' catchtap='selectTaps'>
            <text class='select_text'>{{selectDatas[indexs]}}</text>
            <!-- <image class='words_img' src='../../images/sanjiao.png'></image> -->
            <image class='select_img {{shows&&"select_img_rotate"}}' src='../../images/sanjiao.png'></image>
          </view>
          <view class='option_box' style='height:{{shows?(selectDatas.length>5?300:selectDatas.length*60):0}}rpx;'>
            <text class='option' style='{{indexs==selectDatas.length-1&&"border:0;"}}' wx:for='{{selectDatas}}' wx:key='this' data-index='{{index}}' catchtap='optionTaps'>{{item}}</text>
          </view>
        </view>
    </view>
    

    test.wxss

    /* fenlei */
    .fenlei{
      margin: 0 25rpx;
      height: 90rpx;
      line-height: 90rpx;
      border-bottom: 1rpx solid #e6e6e6;
      display: flex;
      align-items: center;
    }
    .fenlei text{
      font-size: 30rpx;
      color: #999999;
      margin-left: 15rpx;
    }
    /* 下拉框 */
    .select_box {
      background: #fff;
      width: 620rpx;
      /* margin: 0 auto; */
      height: 90rpx;
      line-height: 90rpx;
      text-align: left;
      position: relative;
    }
    
    .select {
      box-sizing: border-box;
      width: 100%;
      height: 86rpx;
      /* border: 1px solid #efefef; */
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
    }
    
    .select_text {
      font-size: 28rpx;
      flex: 1;
      color: rgb(102, 102, 102);
      line-height: 86rpx;
      height: 86rpx;
    }
    
    .select_img {
      width: 40rpx;
      height: 40rpx;
      display: block;
      transition: transform 0.3s;
    }
    
    .select_img_rotate {
      transform: rotate(180deg);
    }
    
    .option_box {
      position: absolute;
      top: 86rpx;
      width: 100%;
      /* border: 1px solid #efefef; */
      box-sizing: border-box;
      height: 0;
      overflow-y: auto;
      border-top: 0;
      background: #fff;
      transition: height 0.3s;
      z-index: 100;
    }
    
    .option {
      display: block;
      line-height: 40rpx;
      font-size: 28rpx;
      border-bottom: 1px solid #efefef;
      padding: 10rpx;
      color: rgb(102, 102, 102);
    }
    
    展开全文
  • uniapp写微信小程序的选择器(类似于select option下拉选择框) 我是在读了uniapp组件后,运用表单组件picker来进行修改写了一个简易的二十四节气的选择器 首先绑定点击事件## 标题 触发点击事件 添加选项 点击...
  • 下拉加载 上拉加载 编码实现 wxml <!--pages/unitmanage/unitlease/unitlease.wxml--> <view> <view class='menu-po'> <!-- 下拉菜单 --> <view class='menu'> <view class=...
  • 知识点:组件,animation,获取当前点击元素的索引与内容微信小程序中没有select下拉选项,所以只有自定义。自定义的话,可以选择模板的方式,也可以选择组件的方式来创建。这次我选择了组件,这样只需引入组件和...
  • 这篇文章主要介绍了微信小程序使用checkbox显示多项选择框功能,涉及相关事件绑定与元素遍历操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下本文实例讲述了微信小程序使用checkbox显示多项选择框功能。...
  • 这篇文章主要为大家详细介绍了微信小程序下拉框组件的使用方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。【推荐教程:小程序开发教程】适用场景1、...
  • 本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景1、省市三级联动2、出生日期选择3、性别选择4、一般性的下拉选择等一、省市三级联动使用注意mode = region,以及value = ...
  • 微信小程序中没有select下拉选项,所以只有自定义。自定义的话,可以选择模板的方式,也可以选择组件的方式来创建。 这次我选择了组件,这样只需引入组件和添加数据,其它的不用管,就能实现多个地方重复使用了。 ...
  • 微信小程序中没有select下拉选项,所以只有自定义。自定义的话,可以选择模板的方式,也可以选择组件的方式来创建。 这次我选择了组件,这样只需引入组件和添加数据,其它的不用管,就能实现多个地方重复使用了。 ...
  • 微信小程序组件里没有下拉框,正好要用到,记下来以后参考wxml代码 选择接收班级{{grade_name}}{{item}}wxss代码/* 顶部 */.top{width: 100vw;height: 80rpx;padding: 0 20rpx;line-height: 80rpx;font-size: 34rpx;...
  • 知识点:组件,animation,获取当前点击元素的索引与内容微信小程序中没有select下拉选项,所以只有自定义。自定义的话,可以选择模板的方式,也可以选择组件的方式来创建。这次我选择了组件,这样只需引入组件和...
  • '请选择' : yilaifang_time}} view> picker> view> <view class="zhuifangbox"> 来访说明view> 来访说明" scroll-y="{{true}}">{{analysis}}scroll-view> view> view> view> js: // bindlfdateChange ...
  • 参考了一位大佬的帖子做了一个下拉选择框可手动输入的实例。 参考原文:https://blog.csdn.net/yelin042/article/details/79078068 下面是我的代码: 样式我是用weui的样式库 <!-- html --> <view class=...
  • 微信小程序中没有select下拉选项,所以只有自定义。自定义的话,可以选择模板的方式,也可以选择组件的方式来创建。 这次我选择了组件,这样只需引入组件和添加数据,其它的不用管,就能实现多个地方重复使用了。...

空空如也

空空如也

1 2 3 4 5
收藏数 81
精华内容 32
关键字:

微信小程序下拉选择框

微信小程序 订阅