精华内容
下载资源
问答
  • 主要介绍了微信小程序 下拉列表的实现实例代码的相关资料,需要的朋友可以参考下
  • 自定义微信小程序下拉选择组件

    万次阅读 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,大功告成!
    附上我的箭头图片 ↓↓↓↓
    箭头

    展开全文
  • 微信小程序下拉选项

    万次阅读 2019-02-18 11:55:06
    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);
    }
    
    展开全文
  • 微信小程序下拉选择

    千次阅读 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-12-01 10:26:14
    效果图:   1.wxml   2.wxss .list-msg {  padding: 0 10rpx; background-color: #fff; position: relative; width: 90%; margin: 30rpx auto; }   .list-msg .list-msg2 { ...display: ...

    效果图:

     

    1.wxml

     

    2.wxss

    .list-msg { 

    padding: 0 10rpx;

    background-color: #fff;

    position: relative;

    width: 90%;

    margin: 30rpx auto;

    }

     

    .list-msg .list-msg2 {

    height: 70rpx;

    display: flex;

    align-items: center;

    justify-content: space-around;

    border: 1px solid #f89219;

    padding: 0 20rpx;

    color: #f89219;

    border-radius: 10rpx;

    }

     

    .select_box {

    padding: 0;

    width: 97%;

    position: absolute;

    top: 90rpx;

    z-index: 1;

    overflow: hidden;

    animation: myfirst 0.5s;

    text-align: center;

    border: 1px solid #f89219;

    color: #f89219;

    border-radius: 10rpx;

    }

     

    @keyframes myfirst {

    from {

    height: 0rpx;

    }

     

    to {

    height: 300rpx;

    }

    }

     

    .select_one {

    height: 70rpx;

    line-height: 70rpx;

    border-bottom: 1px solid #f89219;

    background: #fff;

    }

     

    .select_one:last-child {

    border-bottom: none;

    }

     

    3.js

    data: {

    select: false,

    tihuoWay: '五年级上册第一关班级内详情',

    }

    bindShowMsg() {

    this.setData({

    select: !this.data.select

    })

    },

    mySelect(e) {

    var name = e.currentTarget.dataset.name

    this.setData({

    tihuoWay: name,

    select: false

    })

    },

    展开全文
  • 主要介绍了微信小程序 下拉菜单的实现的相关资料,需要的朋友可以参考下
  • //控制下拉列表的显示隐藏,false隐藏、true显示 selectData: [ '1' , '2' , '3' , '4' , '5' , '6' ], //下拉列表的数据 index: 0 //选择的下拉列表下标 }, // 点击下拉显示 selectTap() { ...
  • 小程序页面集成了下拉功能,并提供了接口,我们只需要一些配置就可以拿到事件的回调。 需要在 .json 文件中配置。 如果配置在app.json文件中,那么整个程序都可以下拉刷新。如果写在具体页面的.json文件中,那么就是...
  • [微信小程序] 微信小程序下拉滚动选择器picker绑定数据的两种方式 微信小程序下拉滚动选择器picker绑定数据的两种方式 本地数据绑定和wx.request(OBJECT) json数据绑定 1.本地数据绑定 (对象数组) Page({ data:{...
  • 主要介绍了微信小程序显示下拉列表功能,涉及微信小程序navigator组件导航及页面加载相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
  • 微信小程序下拉菜单

    2020-01-29 15:51:55
    微信小程序下拉菜单
  • 微信小程序下拉菜单实例

    千次阅读 2017-09-04 14:45:44
    http://www.51xuediannao.com/xiaochengxu/1012112H016.html 当前位置:懒人建站 > 微信小程序开发 > ...微信小程序下拉菜单实例 ...微信小程序下拉菜单实例,小程序的尝鲜制作,开发工具是
  • 微信小程序列表下拉刷新加载更多微信小程序列表下拉刷新加载更多微信小程序列表下拉刷新加载更多
  • 主要为大家详细介绍了微信小程序实现列表下拉刷新上拉加载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 这篇文章主要介绍了微信小程序 下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.下拉刷新的概念及应用场景。 概念: 下拉刷新是...
  • 微信小程序 下拉菜单

    千次阅读 2019-06-05 16:02:12
    微信小程序 下拉菜单 效果: 1.wxml <!-- 下拉菜单 --> <view id="swiper-tab"> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-...
  • 微信小程序中没有select下拉选项,所以只有自定义。这篇文章主要介绍了微信小程序自定义select下拉选项组件,需要的朋友可以参考下
  • 全手势浏览器 博客地址:
  • 微信小程序下拉刷新

    2018-01-22 16:50:41
    今天研究了一下小程序刷新的相关知识,我的需求UI如图所示(点击类目一,类目二刷新列表数据,类目固定在顶部不能滚动,只能滚动列表内容,底部是小程序首页的tab,先要使用微信自带的接口实现下拉刷新): ...
  • 为了提升小程序的用户体验 ,下来刷新列表图片可以用懒加载的,分页加载用concat 添加,我个人用的方法是每请求一页数据就增加一个数组,用来存放获取到的数据,这样setData重新更新数据的时候就只需要更新一组数据...
  • 在一些特殊的UI设计中,需要点击某一处然后弹出下拉菜单列表进行交互。下面介绍一种比较简单的实现方法:wxml文件,使用isShowSelectList参数来控制列表是否隐藏,添加绑定事件bindtap="tapSelectBackView"。请选择...
  • 微信小程序中想要实现下拉刷新,是很方便的。但是如何使用,在文档上找起来却不是很方便。话不多说,直接上文档截图 很明显,enablePullDownRefresh 这个属性设置为true。就默认开启了下拉刷新。...
  • 微信小程序例子——下拉列表

    万次阅读 2016-10-05 21:19:46
    微信小程序例子——下拉列表

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,982
精华内容 3,592
关键字:

微信小程序下拉列表框

微信小程序 订阅