精华内容
下载资源
问答
  • 微信小程序下拉菜单
    千次阅读
    2017-08-29 12:45:58

    效果如图所示



    代码链接:https://github.com/herry-zhang/wxapp-selected

    更多相关内容
  • 微信小程序 下拉菜单 看下实现效果图: 实例: //wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; ...
  • 主要介绍了微信小程序 下拉菜单简单实例的相关资料,需要的朋友可以参考下
  • /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2...
  • 03_微信小程序之自定义下拉菜单组件 一.新建components,名为drop-menu Page({ data: { dates: [2020-03-22, 2020-03-23, 2020-03-24, 2020-03-25, 2020-03-26, 2020-03-27, 2020-03-28] } }) { ...
  • 接下来我想做的是一个下拉菜单用来分类的,但是在网上搜了一下,基本上全都是比较复杂的分类菜单,最简单的也是分三列的下拉菜单,但是并不想要这么复杂的,最后找了一个三列的,改成了单列。也把代码尽可能的简单化...
  • 主要为大家详细介绍了微信小程序实现下拉菜单切换效果,筛选条件功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 上下拉菜单微信小程序中起提示、选项的功能,当点击它时会弹出属于这个菜单的相应选项。使用vant组件库,将 dist 文件提前下载好然后保存到项目中。在小程序中调用组件库,并在正确引用就可以实现了菜单功能了。 ...
  • 2.使用dd嵌套第二级菜单,初始隐藏、position为absolute,使用z-index浮出页面层 /*总菜单容器*/ .menu {  display: block;  height: 38px; }   /*一级菜单*/ .menu dt {  font-size: 15px;  float: left;  /*...
  • /*总菜单容器*/  .menu {   display: block;   height: 28px;   position: relative;  }  /*一级菜单*/  .menu dt {   font-size: 15px;   float: left;   /*hack*/   width: 33%;   height: 38...
  • 微信小程序下拉菜单组件实现

    千次阅读 2021-01-02 13:46:30
    先看需求和效果,移动端设计比较常用的下拉菜单,主要用于筛选查询列表结果。下拉菜单的样式可以根据自己的具体需求进行修改。...我在小程序开发的过程中也开发了许多组件,可以在我的gitee地址中去查看,所有组件的

    先看需求和效果,移动端设计比较常用的下拉菜单,主要用于筛选查询列表结果。下拉菜单的样式可以根据自己的具体需求进行修改。这里根据自己的实际需求开发了三种下拉类型:

    效果展示

    第一个是单选下拉菜单,单选之后立即收起。
    在这里插入图片描述
    第二个是复选下拉菜单,主要提供了多选的功能,显示确定和重置按钮用于修改复选结果。
    在这里插入图片描述
    第三种是自定义内容,提供给用户自己写组件内容的插槽。
    在这里插入图片描述

    要点

    1. 组件间的关系

    父组件WXML

    <view class="mt_dropdown" id="mt_dropdown">
      <slot></slot>
    </view>
    

    DEMO运用组件

    <mt-dropdown>
    	<mt-dropdown-item></mt-dropdown-item>
    	<mt-dropdown-item></mt-dropdown-item>
    </mt-dropdown>
    

    主要问题:子组件是放在slot插槽里面,如何和父组件进行沟通。因为遮罩层是嵌在子组件里的,所以需要点击打开一个下拉菜单子项的时候,去关闭其余下拉菜单子项。大家有空可以去看下vant-weapp的源码,这里处理的较为简单。最主要的问题就是<mt-dropdown-item><mt-dropdown>之间如何沟通。

    遇事不决先看文档微信小程序-组件间关系,主要是relations定义段


    微信小程序代码片段,可以在微信开发者工具中查看效果和代码。

    我在小程序开发的过程中也开发了许多组件,可以在我的gitee地址中去查看,所有组件的API都可以在Wiki中查看(有的太懒就没写了),如果好的建议可以留言给我或者评论跟我讨论。如果对你有用可以点赞、收藏、分享。

    展开全文
  • 微信小程序下拉菜单实例

    千次阅读 2017-09-04 14:45:44
    http://www.51xuediannao.com/xiaochengxu/1012112H016.html 当前位置:懒人建站 > 微信小程序开发 > ...微信小程序下拉菜单实例 ...微信小程序下拉菜单实例,小程序的尝鲜制作,开发工具是

    http://www.51xuediannao.com/xiaochengxu/1012112H016.html

    当前位置: 懒人建站 >  微信小程序开发 >

    微信小程序下拉菜单实例

    来源:web前端开发 作者: 懒人建站 日期:2016-10-12 人气:19017 QQ交流群:4188479
    微信小程序下拉菜单实例,小程序的尝鲜制作,开发工具是0.9版,不过思想和原理是一样的,非常适合微信小程序入门。

    微信小程序下拉菜单实例,小程序的尝鲜制作,开发工具是0.9版,不过思想和原理是一样的,非常适合微信小程序入门。

    微信小程序下拉菜单实例

     微信小程序下拉菜单思路与步骤:

    布局方面,整体使用dl来写,二级包在dd中,用ul li来写;交互方面,点击某一级菜单,关闭兄弟子菜单,点击某子菜单关闭所有菜单。

    1.使用dt做出第一级菜单

    2.使用dd嵌套第二级菜单,初始隐藏、position为absolute,使用z-index浮出页面层

    /*总菜单容器*/
    .menu {display: block;height: 38px;}
    /*一级菜单*/
    .menu dt {
       font-size: 15px;float:left;width: 33%;height: 38px;border-right: 1px solid #d2d2d2;
       border-bottom: 1px solid #d2d2d2; text-align: center;background-color: #f4f4f4; color: #5a5a5a;line-height: 38px;
    }
    /*二级菜单外部容器样式*/
    .menu dd{ position: absolute;width: 100%;top:39px; left:0;z-index:999;}
    /*二级菜单普通样式*/
    .menu li{
       font-size: 14px; line-height: 34px;color: #575757;height: 34px;display: block;padding-left: 8px;
       background-color: #fff;border-bottom: 1px solid #dbdbdb;
    }

    查看效果,接下来实现点击事件。

    如图

    3.dt绑定点击事件tapMainMenu,flag控制显隐toggle,提供2个class,hidden与show,来控制显隐。注:dt也是可以bindTap的,不单是view。

    /* 显示与隐藏 */
    .show {
       display: block;
    }
    .hidden {
     display: none;
    }
    web前端开发http://www.51xuediannao.com/

    4.关闭所有一级菜单,每个一级菜单都有一个index标识,由tapMainMenu事件传递过去,与数组subMenuDisplay一一对应,当前元素subMenuDisplay[index]视原来状态决定是显示或隐藏。

    核心代码:

    <dl class="menu">
        <dt data-index="0" bindtap="tapMainMenu">价格</dt>
        <dd class="{{subMenuDisplay[0]}}">
            <ul><li>sub1</li><li>sub2</li></ul>
        </dd>
    </dl>
    //使用function初始化array,相比var initSubMenuDisplay = [] 既避免的引用复制的,同时方式更灵活,将来可以是多种方式实现,个数也不定的
    function initSubMenuDisplay() { 
         return ['hidden', 'hidden', 'hidden'];
    }
    
    Page({
        data:{
            subMenuDisplay:initSubMenuDisplay()
        },
        tapMainMenu: function(e) {//        获取当前显示的一级菜单标识
            var index = parseInt(e.currentTarget.dataset.index);        // 生成数组,全为hidden的,只对当前的进行显示
            var newSubMenuDisplay = initSubMenuDisplay();//        如果目前是显示则隐藏,反之亦反之。同时要隐藏其他的菜单
            if(this.data.subMenuDisplay[index] == 'hidden') {
                newSubMenuDisplay[index] = 'show';
            } else {
                newSubMenuDisplay[index] = 'hidden';
            }        // 设置为新的数组
            this.setData({
                subMenuDisplay: newSubMenuDisplay
            });
        }
    });

    5.选中二级菜单当前项,但给个系统icon及改变背景色,文本加粗,同样改变一级菜单标题,demo中给出一个弹窗

    声明tapSubMenu方法,监听二级点击事件

    //获取当前显示的一级菜单标识
    tapSubMenu: function(e) { 
        var index = parseInt(e.currentTarget.dataset.index);
        console.log(index);  // 隐藏所有一级菜单
        this.setData({ 
           subMenuDisplay: initSubMenuDisplay() 
        }); 
    }
    

    加highlight效果

    /*二级菜单高亮样式*/
    .menu li.highlight{
       background-color: #f4f4f4;
    }

    与一级菜单不同,使用二维数组的方式实现点击高亮,这样才能定位到是某一级的某二级菜单,再决定显示隐藏。 布局文件改成:

        <dd class="{{subMenuDisplay[0]}}">
            <ul>
                <li class="{{subMenuHighLight[0][0]}}" data-index="0-0" bindtap="tapSubMenu">100以内</li>
                <li class="{{subMenuHighLight[0][1]}}" data-index="0-1" bindtap="tapSubMenu">100-500</li>
                <li class="{{subMenuHighLight[0][2]}}" data-index="0-2" bindtap="tapSubMenu">500-1000</li>
                <li class="{{subMenuHighLight[0][3]}}" data-index="0-3" bindtap="tapSubMenu">1000-3000</li>
                <li class="{{subMenuHighLight[0][4]}}" data-index="0-4" bindtap="tapSubMenu">3000以上</li>
            </ul>
        </dd>

    效果如图

    使用二维数组的方式实现点击高亮

    相应的js代码要写成:

    //声明初始化高亮状态数组function initSubMenuHighLight() {    return [
            ['','','','',''],
            ['',''],
            ['','','']
        ];
    }

    点击事件

    tapSubMenu: function(e) {        // 隐藏所有一级菜单
            this.setData({
                subMenuDisplay: initSubMenuDisplay()
            });        // 处理二级菜单,首先获取当前显示的二级菜单标识
            var indexArray = e.currentTarget.dataset.index.split('-');        console.log("indexArray : " + indexArray);        var newSubMenuHighLight = initSubMenuHighLight();        // 与一级菜单不同,这里不需要判断当前状态,只需要点击就给class赋予highlight即可
            newSubMenuHighLight[indexArray[0]][indexArray[1]] = 'highlight';        console.log(newSubMenuHighLight);        // 设置为新的数组
            this.setData({
                subMenuHighLight: newSubMenuHighLight
            });
        }

    这样就实现了高亮与取消高亮。但还没完,与一级菜单不同,这里与兄弟子菜单是非互斥的,也就是说点击了本菜单,是不能一刀切掉兄弟菜单的高亮状态的。于是我们改进js代码。

    声明方式,改用变量形式,方便存储。

    //定义初始化数据,用于运行时保存
    var initSubMenuHighLight = [
       ['','','','',''],
       ['',''],
       ['','','']
    ];

    点击事件

        tapSubMenu: function(e) {        // 隐藏所有一级菜单
            this.setData({
                subMenuDisplay: initSubMenuDisplay()
            });        // 处理二级菜单,首先获取当前显示的二级菜单标识
            var indexArray = e.currentTarget.dataset.index.split('-');        // 初始化状态
            // var newSubMenuHighLight = initSubMenuHighLight;
            for (var i = 0; i < initSubMenuHighLight.length; i++) {            // 如果点中的是一级菜单,则先清空状态,即非高亮模式,然后再高亮点中的二级菜单;如果不是当前菜单,而不理会。经过这样处理就能保留其他菜单的高亮状态
                if (indexArray[0] == i) {                for (var j = 0; j < initSubMenuHighLight[i].length; j++) {                    // 实现清空
                        initSubMenuHighLight[i][j] = '';
                    }                // 将当前菜单的二级菜单设置回去
                }
            }        // 与一级菜单不同,这里不需要判断当前状态,只需要点击就给class赋予highlight即可
            initSubMenuHighLight[indexArray[0]][indexArray[1]] = 'highlight';        // 设置为新的数组
            this.setData({
                subMenuHighLight: initSubMenuHighLight
            });
        }

    有待完善功能点:

    1.显示与隐藏带动画下拉

    2.抽象化,使用回调函数,将监听每个二级菜单的点击

    3.数据源与显示应当是分离的,一级与二级菜单的key value应该是独立在外,系统只认index,然后对相应点击作处理,跳转页面,筛选结果等

    4.点击二级菜单时,会将全部组的清除,有待修复

    本文链接: 微信小程序下拉菜单实例http://www.51xuediannao.com/xiaochengxu/1012112H016.html

    微信小程序下拉菜单实例由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。


    展开全文
  • 本文实例为大家分享了微信小程序实现下拉菜单栏的具体代码,供大家参考,具体内容如下 js代码 var cityData = require('../../utils/city.js'); Page({ data: { //选择的终点城市暂存数据 endselect: "", //...
  • 主要介绍了微信小程序 select 下拉框组件功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 点击标签栏弹出菜单,并且出现透明遮罩; 遮罩优先级在弹出框之下; 弹出框内标签的设置; 滚动栏滚动条的隐藏 如何解决? 弹性布局,横向,三者平分整栏; 状态监听点击事件,数据控制hide或者show,通过rgba...
  • 小程序下拉搜索框弹出菜单动画效果,外观美美哒的demo
  • 微信小程序下拉菜单功能的实现

    千次阅读 2019-04-28 10:35:12
    页面wxml代码如下: ...-- 下拉菜单栏 --> <view class='list'> <ul class="font_s30"> <li bindtap="getNav" data-id='area' style="color:{{c_area}}"> <view> ...

    页面wxml代码如下:

      <!-- 下拉菜单栏 -->
      <view class='list'>
        <ul class="font_s30">
          <li bindtap="getNav" data-id='area' style="color:{{c_area}}">
            <view>
              <span class = "l_name" id="area">{{area}}</span>
              <image src='{{url}}' style='width:20rpx; height:16rpx'></image>
            </view>
          </li>
          <li bindtap="getNav" data-id='position' style="color:{{c_position}}">
            <view>
              <span class = "l_name" id="position" >{{position}}</span>
              <image src='{{url1}}' style='width:20rpx; height:16rpx'></image>
            </view>
          </li>
          <li bindtap="getNav" data-id='price' style="color:{{c_price}}">
             <view>
              <span class = "l_name" id="price">{{price}}</span>
              <image src='{{url2}}' style='width:20rpx; height:16rpx'></image>
            </view>
          </li>
          <li bindtap="getNav" data-id='cast' style="color:{{c_cast}}">
             <view>
              <span class = "l_name" id="cast">{{cast}}</span>
              <image src='{{url3}}' style='width:20rpx; height:16rpx'></image>
            </view>
          </li>
        </ul>
      </view>
       <!-- 下拉显示列表-->
         <view class='area' hidden="{{show}}">
        <view class='selectList'>
          <p wx:for="{{content}}" wx:key="item.code" id="{{item.code}}" data-name="{{item.name}}" class="s_list font_s33 {{listColor==tap+ item.code?'a_color':''}}"  bindtap="liCheck">{{item.name}}</p>
        </view>
      </view>
      
    

    js代码如下:

      data: {
      show:true,
      content:",
      },
    getNav: function(e) {
        var id = e.currentTarget.dataset.id; 
        var that = this;
        var url = "/apid/r/4";
        var pram = "";
        if(id == "area"){
          that.setData({
            url: "/images/menu/unselect.png",
          })    
    
        }else if(id == "position"){
          that.setData({
            url1: "/images/menu/unselect.png",
          }) 
        }else if(id == "price"){
          that.setData({
            url2: "/images/menu/unselect.png",
          }) 
        } else if (id == "cast") {
          that.setData({
            url3: "/images/menu/unselect.png",
          }) 
        }
        util.wxRequest(url, pram, null, function(data) {
          data.push({
            code:'',
            name:'不限'
          })
          that.setData({
            show: false,
            content:data
          })
        }, null, that);
      },
    

    实现效果如下:
    在这里插入图片描述

    展开全文
  • 微信小程序下拉筛选菜单

    千次阅读 2019-07-29 19:21:02
    微信小程序下拉筛选菜单 最近在做一个社交商城的微信小程序项目,碰到下拉筛选菜单,按自己的想法写了一个,写的不好忘各位大佬指教,哈哈~ ps:因为后端还没有数据所以筛选功能还没做,但是基本功能实现后做筛选也很...
  • 微信小程序中没有select下拉选项框,所以只有自定义。自定义的话,可以选择模板的方式,也可以选择组件的方式来创建。 这次我选择了组件,这样只需引入组件和添加数据,其它的不用管,就能实现多个地方重复使用了。 ...
  • 最近在做一个项目的时候,需要用到下拉框搜索,网上搜了半天没找到想要的,决心自己动手写一个。 首先看下效果图: 左边是输入框,可以进行模糊查询,右边图标进行选择。 代码部分,我定义了五个参数,和一个...
  • 因为自己最近也需要写个小程序的下拉框的三级菜单筛选,分享给有需要的人哈。 (一)、实现效果 1、原作者资料的实现效果: 2、自己二次开发实现效果: (二)实现过程 实现的代码也并不复杂,主要是控制各个容器的...
  • 在另一篇文章《2018年设计趋势指南》中发现一款菜单不错,就想着用微信小程序实现 先把成果摆上来   (此图片来源于网络,如有侵权,请联系删除! ) 开始正题 上方Nav 基本 flex 布局再加个 padding 不需要多讲吧...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,045
精华内容 2,818
关键字:

微信小程序下拉菜单

微信小程序 订阅
友情链接: MyCurl.rar