精华内容
下载资源
问答
  • 主要介绍了微信小程序 下拉菜单的实现的相关资料,需要的朋友可以参考下
  • 主要介绍了微信小程序 下拉菜单简单实例的相关资料,需要的朋友可以参考下
  • 微信小程序下拉菜单

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

    微信小程序下拉菜单

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

    千次阅读 2019-03-07 00:36:44
    创建小程序下拉菜单 菜单的按钮箭头是利用边框线加旋转功能实。 利用css display: none;隐藏菜单,和.dropdown:hover .dropdown-content { display: block;显示菜单详见代码 wxml内容 <!--下拉...

    创建小程序下拉菜单
    菜单的按钮箭头是利用边框线加旋转功能实。
    利用css display: none;隐藏菜单,和.dropdown:hover .dropdown-content {
    display: block;显示菜单详见代码
    wxml内容

     
        <!--下拉菜单  -->
        <view class='weui-cell '>
          <!--下拉框  -->
          <view class="weui-cell__bd dropdown" bindtap='bindShowMsg'>
            <span class="dropbtn">分类</span>
            <span class="jiantoudown"></span>
            <!-- 下拉需要显示的列表 -->
            <view class="dropdown-content" wx:if="{{select}}">
              <block wx:for="{{infotype}}" wx:key="this" wx:for-item="item">
                <view class="dropdown-item" bindtap="mySelect" data-name="{{index}}">{{item}}</view>
              </block>
            </view>
          </view>
    
          <!--下拉框  -->
          <view class="weui-cell__bd dropdown" bindtap='bindShowMsg'>
            <span class="dropbtn">附近</span>
            <span class="jiantoudown"></span>
            <!-- 下拉需要显示的列表 -->
            <view class="dropdown-content" wx:if="{{select}}">
              <block wx:for="{{infotype}}" wx:key="this" wx:for-item="item">
                <view class="dropdown-item" bindtap="mySelect" data-name="{{index}}">{{item}}</view>
              </block>
            </view>
          </view>
    
         <!--下拉框  -->
          <view class="weui-cell__bd dropdown" bindtap='bindShowMsg'>
            <span class="dropbtn">智能排序</span>
            <span class="jiantoudown"></span>
            <!-- 下拉需要显示的列表 -->
            <view class="dropdown-content" wx:if="{{select}}">
              <block wx:for="{{infotype}}" wx:key="this" wx:for-item="item">
                <view class="dropdown-item" bindtap="mySelect" data-name="{{index}}">{{item}}</view>
              </block>
            </view>
          </view>
    
        </view>
    

    js的内容

      data: {
        infotype: ["转让", "求购", "出租", "求租", "求职", "公益"],
        nearytype: ["1千米", "3千米", "5千米", "10千米", "全城", "地图点选"],
        ordertype: ["智能排序","好评优先","离我最近","佣金最高",]
      },
      mySelect(e) {
        var name = e.currentTarget.dataset.name
        this.setData({
          tihuoWay: name,
          select: false
        })
      },
      bindShowMsg() {
        this.setData({
          select: !this.data.select
        })
      },
    

    wxss内容

    /*箭头---通过角旋转得倒,*/
    .jiantoudown{
      padding-right: 3px;
     }
    .dropbtn:after{
      content: " ";
      display: inline-block;
      height: 6px;
      width: 6px;
      border-width: 2px 2px 0 0;
      border-color: #c8c8cd;
      border-style: solid;
      -webkit-transform:rotate(135deg);
      transform: rotate(135deg);
      top: -2px;
      position: relative;
      top: 50%;
      margin-top: -4px;
      right: -17rpx;
    }
    /*下拉菜单*/
    .dropdown {  
      display: inline-block;
    }
    
    .dropdown-content {
      display: none;  /*下拉菜单先不显示*/
      position: absolute;
      background-color: #f9f9f9;
      min-width: 100rpx;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      padding: 10px 16px;
    }
    /* 下接菜单项*/
    .dropdown-item{padding: 10px 15px;}
    .dropdown-item:hover { background-color: #3e8e41; }
    
    /* 当鼠标在下拉菜单按钮上时显示菜单*/
    .dropdown:hover .dropdown-content {
      display: block;
    }
    	/* 当鼠标在下拉菜单按钮上时按钮变色*/
    .dropdown:hover .dropbtn {
        color: #3e8e41; /* 当下拉内容显示后修改下拉按钮的背景颜色*/
    }
    
    
    展开全文
  • 微信小程序 下拉菜单

    千次阅读 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 () {
    
      }
    })

     

    展开全文
  • 微信小程序下拉菜单实例,小程序的尝鲜制作,开发工具是0.9版,不过思想和原理是一样的,非常适合微信小程序入门。微信小程序下拉菜单思路与步骤:布局方面,整体使用dl来写,二级包在dd中,用ul li来写;交互方面,...

    微信小程序下拉菜单实例,小程序的尝鲜制作,开发工具是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]视原来状态决定是显示或隐藏。

    核心代码:

    //使用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;

    }

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

    • 100以内
    • 100-500
    • 500-1000
    • 1000-3000
    • 3000以上

    效果如图

    相应的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.点击二级菜单时,会将全部组的清除,有待修复

    ↓ 查看全文

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

    千次阅读 2017-09-04 14:45:44
    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地址中去查看,所有组件的
  • 针对于微信小程序做了个下拉菜单的自定义组件,样式如下~ 主要包括以下两种类型 级联选择器,例如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' : ''}}" ...
  • 第一步:我在整个整改页面加了一个遮罩层,而遮罩层的判断变量与下拉列表的判断变量是一致的,因此页面初始加载,整改列表也被隐藏了 于是我将marks(遮罩层)放在了这个位置1,但是他占了位置,我需要将他脱离文档...
  • 微信小程序下拉菜单功能的实现

    千次阅读 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> ...
  • 做个电商微信小程序需要什么资质看你做的是什么性 质的,如果是自 己用的,卖产品的,一般只需要营业执照、 对公账 户之类的就可以了。如果是类似某宝那种多商户入驻型的,除营业执照、对公账户之外,还需要电信增值...
  • 南通怎么做小程序开发 oehrs6南通怎么做小程序开发 信息流广告成为巨头竞技场。据不统计,目前很多车企推出的纯电动汽车新品定价区间都在万之间,例如,蔚来配置也要.万,威马也是.万元起,广汽新能源推出的补贴...
  • 一般在筛选的场景中需要使用下拉菜单,动态设置筛选条件,比如淘宝,京东的产品筛选列表,携程的旅游目的地的筛选列表。 支持 配置化设置弹层内容 支持动态刷新弹层内容 支持动态修改分类标题 支持遮罩层 支持api...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,145
精华内容 458
关键字:

小程序下拉菜单