精华内容
下载资源
问答
  • 微信小程序下拉菜单

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

    微信小程序下拉菜单

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

    千次阅读 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-...

    微信小程序  下拉菜单

    效果:

    1.wxml

    <!-- 下拉菜单 -->
     <view id="swiper-tab">
     <view class="swiper-tab">
      <view class="swiper-tab-list  {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="tabNav">{{first}}
      <i></i>
      </view>
      <view class="swiper-tab-list   {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="tabNav">{{seond}}
      <i></i>
      </view>
      <view class="swiper-tab-list  {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="tabNav">{{thrds}}
      <i></i>
      </view>
     </view>
     <swiper current="{{currentTab}}" duration="1000" class="swiper-item" style='display:{{displays}}'>
      <swiper-item>
      <view class="location_bottom" hidden="">
       <view class="{{_num == 1?'add_citying':'add_city'}}" data-num="1" bindtap="clickNum" data-name="智能排序">智能排序</view>
       <view class="{{_num == 2?'add_citying':'add_city'}}" data-num="2" bindtap="clickNum" data-name="离我最近">离我最近</view>
       <view class="{{_num == 3?'add_citying':'add_city'}}" data-num="3" bindtap="clickNum" data-name="好评优先">好评优先</view>
       <view class="{{_num == 4?'add_citying':'add_city'}}" data-num="4" bindtap="clickNum" data-name="离我最近">离我最近</view>
      </view>
      </swiper-item>
      <swiper-item>
      <view class="location_bottom" hidden="">
       <view class="{{_res == 1?'add_House':'add_city'}}" data-num="1" bindtap="clickHouse" data-name="智能排序">智能排序</view>
       <view class="{{_res == 2?'add_House':'add_city'}}" data-num="2" bindtap="clickHouse" data-name="离我最近">离我最近</view>
       <view class="{{_res == 3?'add_House':'add_city'}}" data-num="3" bindtap="clickHouse" data-name="好评优先">好评优先</view>
       <view class="{{_res == 4?'add_House':'add_city'}}" data-num="4" bindtap="clickHouse" data-name="离我最近">离我最近</view>
      </view>
      </swiper-item>
      <swiper-item class="shaixuankuang">
      <view class="shaixuan">
       <span class="shuaixuantiaojian">用餐人数</span>
       <block wx:for="{{array}}" wx:key="key">
       <view class="chose-txt" data-id="{{index}}" bindtap="choseTxtColor" style="{{index == one?' border:1rpx solid #e8580c; color: #e8580c':'border:1rpx solid gainsboro;color:gray'}}">
        <text class="chose-p">{{item.name}}</text>
       </view>
       </block>
      </view>
      <view class="shaixuan">
       <span class="shuaixuantiaojian">餐厅服务</span>
       <block wx:for="{{chaoxiang}}" wx:key="key">
       <view class="chose-txt" data-id="{{index}}" bindtap="chaoxiang" style="{{index == two?'border:1rpx solid #e8580c; color: #e8580c':'border:1rpx solid gainsboro;color:gray'}}">
        <text class="chose-p">{{item.name}}</text>
       </view>
       </block>
      </view>
      <view class="qingkong">
       <span class="tianjian" bindtap="qingchu">清除条件</span>
       <p class="queren" bindtap="queren">确认</p>
      </view>
      </swiper-item>
     </swiper>
     </view>
     <view class="swiper-beijing" bindtap="hideNav" style='display:{{displays}}'></view>
    <!-- 下拉菜单结束 -->

    2.css

    /*下拉菜单开始*/
    #swiper-tab {
     width: 100%;
     position: relative;
    }
    .swiper-tab {
     width: 100%;
     text-align: center;
     line-height: 80rpx;
     background-color: white;
    
    }
    .lista{
       width: 235rpx;
       right: 65rpx;
    }
    .listb{
    width:150rpx;
    left: 55rpx;
    }
    .listc{
    width:150rpx;
    right: 90rpx;
    }
    .swiper-tab-list {
     font-size: 30rpx;
     display: inline-block;
     color: #666;
     border-bottom: 0rpx;
     position: relative;
     width: 33%;
    }
    .swiper-tab-list i {
     position: absolute;
     bottom: 30%;
     right: 10%;
     width: 0px;
     height: 0px;
     border: 5px solid rgb(182, 186, 195);
     border-top-color: rgb(182, 186, 195);
     border-bottom-color: transparent;
     border-left-color: transparent;
     border-right-color: transparent;
    }
    .on {
     color: #f63;
     /* border-bottom: 2rpx solid #f63; */
    }
    .on i {
     border: 5px solid #f63;
     border-top-color: #f63;
     border-bottom-color: transparent;
     border-left-color: transparent;
     border-right-color: transparent;
    }
    .swiper-box {
     display: block;
     height: 100%;
     width: 100%;
     overflow: hidden;
    }
    .swiper-box view {
     text-align: center;
    }
    .swiper-item {
     background: #fff;
     width: 100%;
     height: 360rpx;
     display: none;
     position: absolute;
     /* top: 100rpx; */
     z-index: 333333;
     left: 0;
     animation: displays 1s;
    }
    @keyframes displays {
     from {
     height: 0px;
     }
     to {
     height: 360rpx;
     }
    }
    .swiper-beijing {
     width: 100%;
     height:100%;
     background: #000;
     opacity: 0.5;
     position: absolute;
     /* top: 130px; */
     left: 0;
     display: none;
     z-index: 888;
     animation: 1s;
    }
    /* 下拉切换中的切换 */
    .nav {
     width: 20%;
     height: 100rpx;
     float: left;
     flex-direction: row;
    }
    .default {
     width: 100%;
     line-height: 100rpx;
     text-align: center;
     color: #000;
     font-weight: bold;
     font-size: 28rpx;
     overflow: hidden;
    }
    .red {
     width: 100%;
     float: right;
     line-height: 100rpx;
     text-align: center;
     color: #f63;
     font-weight: bold;
     font-size: 28rpx;
    }
    .show {
     display: block;
     text-align: center;
     line-height: 200rpx;
    }
    .hidden {
     display: none;
     text-align: center;
     line-height: 200px;
    }
    #rights {
     width: 79%;
     float: right;
     border-left: solid 1px #eee;
     font-size: 15px;
     max-height: 600rpx;
     overflow-y: auto;
     overflow-x: hidden;
    }
    /*添加class改变样式 */
    .location_bottom {
     width: 100%;
     height: 400rpx;
     line-height: 140rpx;
     color: #d91f16;
     font-size: 28rpx;
     padding: 0 20rpx;
     align-items: center;
    }
    .add_city {
     width: 90%;
     display: block;
     height: 70rpx;
     line-height: 70rpx;
     border-bottom: 2rpx solid #ebebeb;
     color: #000;
     padding-left: 5%;
    }
    .add_adress {
     height: 70rpx;
     line-height: 70rpx;
     border-bottom: 2rpx solid #f63;
     color: #f63;
    }
    .add_adre {
     height: 70rpx;
     line-height: 70rpx;
     border-bottom: 2rpx solid #f63;
     color: #f63;
    }
    .add_citying {
     padding-left: 5%;
     height: 70rpx;
     line-height: 70rpx;
     border-bottom: 2rpx solid #f63;
     color: #f63;
    }
    .add_House {
     padding-left: 5%;
     height: 70rpx;
     line-height: 70rpx;
     border-bottom: 2rpx solid #f63;
     color: #f63;
    }
    /*// 筛选 */
    .shaixuankuang {
     width: 100%;
     height: 600rpx;
     overflow: hidden;
     max-height: 600rpx;
     overflow-y: auto;
     overflow-x: hidden;
    }
    .shaixuan {
     width: 100%;
     height: auto;
     overflow: hidden;
    }
    .shuaixuantiaojian {
     width: 95%;
     padding: 0 2.5% 1%;
     display: block;
     font-size: 30rpx;
     color: #999;
    }
    .chose-txt {
     /* border-radius: 6px; */
     font-size: 26rpx;
     width: 29%;
     margin: 4px 14rpx;
     float: left;
    }
    .chose-p {
     line-height: 25px;
     width: 100%;
     height: 25px;
     text-align: center;
     float: left;
    }
    .zidingyi {
     width: 95%;
     height: 50px;
     margin: 0 auto;
     overflow: hidden;
    }
    .zidingyi span {
     float: left;
     font-size: 16px;
     line-height: 40px;
     color: #666;
     margin-right: 15rpx;
    }
    .zidingyi input {
     width: 50px;
     padding-left: 10rpx;
     float: left;
     margin-top: 10rpx;
     font-size: 15px;
     line-height: 40px;
     border: solid 1px #eee;
     color: #666;
    }
    .zidingyi p {
     float: left;
     margin: 0 15rpx;
     line-height: 40px;
     color: #666;
    }
    .zidingyi button {
     height: 28px;
     float: left;
     margin: 10rpx 0 0 25rpx;
     font-size: 13px;
     line-height: 28px;
     /* border: solid 1px #eee; */
     color: #666;
    }
    .qingkong {
     width: 95%;
     height: 40px;
     margin: 40rpx auto 30rpx;
    }
    .qingkong span {
     float: left;
     width: 35%;
     height: 33px;
     border: 1px solid #eee;
     box-sizing: border-box;
     color: #666;
     font-size: 14px;
     font-weight: 300;
     text-align: center;
     line-height: 33px;
     border-radius: 3px;
    }
    .qingkong p{
     float: right;
     width: 55%;
     height: 35px;
     color: #fff;
     font-size: 14px;
     font-weight: 300;
     text-align: center;
     line-height: 35px;
     background: rgba(229,65,65,0.95);
     border-radius: 3px;
    }
    /* 下拉菜单结束 */

    3.js

    //下拉菜单获取应用实例
    
    var a = -1;
    var b = -1;
    var c = -1;
    var d = -1;
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        
        // 下拉菜单
        first: '分类',
        seond: '智能排序',
        thrds: '筛选',
        _num: 0,
        _res: 0,
        // 筛选
        array: [{ name: '1-2用餐' }, { name: '2-4用餐' }, { name: '4-6用餐' }, { name: '6-8用餐' }],
        chaoxiang: [{ name: '买单' }, { name: '外卖送餐' }, { name: '订座' }, { name: '在线排队' }],
        one: 0,
        two: 0,
    
      },
      isShow: true,
      currentTab: 0,
      // 下拉切换
      hideNav: function () {
        this.setData({
          displays: "none"
        })
      },
      tabNav: function (e) {
        this.setData({
          displays: "block"
        })
        // this.setData({
        //   selected1: false,
        //   selected2: false,
        //   selected: true
        // })
        if (this.data.currentTab === e.target.dataset.current) {
          return false;
        } else {
    
          var showMode = e.target.dataset.current == 0;
    
          this.setData({
            currentTab: e.target.dataset.current,
            isShow: showMode
          })
        }
      },
      // 下拉切换中的切换
    
      // 分类
      clickNum: function (e) {
        console.log(e.target.dataset.num)
        this.setData({
          _num: e.target.dataset.num
        })
        this.setData({
          second: e.target.dataset.name
        })
        this.setData({
          displays: "none"
        })
        var text = this.data.name
        console.log(text)
      },
      onLoad: function (options) {
    
      },
      // 排序
      clickHouse: function (e) {
        console.log(e.target.dataset.num)
        this.setData({
          _res: e.target.dataset.num
        })
        this.setData({
          thirds: e.target.dataset.name
        })
        this.setData({
          displays: "none"
        })
      },
      onLoad: function (options) {
    
      },
    
      // 筛选
      choseTxtColor: function (e) {
        var id = e.currentTarget.dataset.id; //获取自定义的ID值 
        console.log(e.currentTarget.dataset.id)
        this.setData({
          one: id
        })
      },
      chaoxiang: function (e) {
        var id = e.currentTarget.dataset.id; //获取自定义的ID值 
        this.setData({
          two: id
        })
      },
    
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        app.editTabBar();
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

     

    展开全文
  • 主要介绍了微信小程序 下拉菜单的实现的相关资料,需要的朋友可以参考下
  • 主要介绍了微信小程序 下拉菜单简单实例的相关资料,需要的朋友可以参考下
  • 主要介绍了微信小程序下拉菜单效果的实例代码,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 微信小程序下拉菜单实例

    千次阅读 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

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

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


    展开全文
  • /*总菜单容器*/  .menu {   display: block;   height: 28px;   position: relative;  }  /*一级菜单*/  .menu dt {   font-size: 15px;   float: left;   /*hack*/   width: 33%;   height: 38...
  • 先看需求和效果,移动端设计比较常用的下拉菜单,主要用于筛选查询列表结果。下拉菜单的样式可以根据自己的具体需求进行修改。...我在小程序开发的过程中也开发了许多组件,可以在我的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中查看(有的太懒就没写了),如果好的建议可以留言给我或者评论跟我讨论。如果对你有用可以点赞、收藏、分享。

    展开全文
  • 针对于微信小程序做了个下拉菜单的自定义组件,样式如下~ 主要包括以下两种类型 级联选择器,例如xx区-xx街道 下拉列表,例如排序,筛选等 使用 具体使用方式参照index.wxml示例 支持动态修改Navgation上的...
  • 微信小程序 下拉菜单实现

    万次阅读 2018-09-07 15:13:56
    // 下拉菜单 --------------------------------- area_list: [ { key: 1 , value : "市南区" }, { key: 2 , value : "市北区" }, { key: 3 , value : "李沧区" }, { key: 4 , value : "崂山区...
  • 微信小程序 下拉菜单切换 筛选条件

    万次阅读 多人点赞 2018-06-07 11:20:56
    -- 下拉菜单 --&gt; &lt;view id="swiper-tab"&gt; &lt;view class="swiper-tab"&gt; &lt;view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" ...
  • 微信小程序下拉菜单功能的实现

    千次阅读 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> ...
  • 微信小程序下拉筛选菜单

    千次阅读 2019-07-29 19:21:02
    微信小程序下拉筛选菜单 最近在做一个社交商城的微信小程序项目,碰到下拉筛选菜单,按自己的想法写了一个,写的不好忘各位大佬指教,哈哈~ ps:因为后端还没有数据所以筛选功能还没做,但是基本功能实现后做筛选也很...
  • 2.使用dd嵌套第二级菜单,初始隐藏、position为absolute,使用z-index浮出页面层 /*总菜单容器*/ .menu {  display: block;  height: 38px; }   /*一级菜单*/ .menu dt {  font-size: 15px;  float: left;  /*...
  • 微信小程序下拉列表菜单

    千次阅读 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 2 3 4 5 ... 11
收藏数 206
精华内容 82
关键字:

微信小程序下拉菜单

微信小程序 订阅