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

    2021-03-29 18:06:25
    今天的这篇文章是关于微信小程序菜单的实现,话不多说,上图。 (此图片来源于网络,如有侵权,请联系删除! ) 源码传送门 通过效果图,我们看到,窗口最上面是两个菜单按钮,它是固定悬浮在最上面,当点击时分别显示...
  • 最近一个月都在做微信小程序,作为一个Android开发者,在这一个月很少写...今天的这篇文章是关于微信小程序菜单的实现,话不多说,上图。menu1.gif通过效果图,我们看到,窗口最上面是两个菜单按钮,它是固定悬浮在...

    最近一个月都在做微信小程序,作为一个Android开发者,在这一个月很少写Android的代码,真是悲催,好在现在已经完整的把小程序做完了,下周就继续开始我的Android生涯了,现在回过头来写写自己认为比较常见的一些功能的实现,来帮助小程序学习爱好者学习参考。今天的这篇文章是关于微信小程序菜单的实现,话不多说,上图。

    menu1.gif

    通过效果图,我们看到,窗口最上面是两个菜单按钮,它是固定悬浮在最上面,当点击时分别显示状态选择和时间选择,那此处状态就是我们购物订单的状态,有全部,待付款,等,并且当前选中的状态加上红色的边框,让用户知道当前的选择项。那点击时间时就显示显示开始日期和结束日期,当点击确定时对当前日期时间段的购物订单进行过滤。

    状态和时间菜单按钮实现

    菜单按钮实现很简单,使用display:flex属性,使用position: fixed将其定位窗口显示 top: 0;left: 0;悬浮在最上面。上下都加上边框。

    状态

    时间

    样式

    .top-menu {

    display: flex;

    position: fixed;

    height: 80rpx;

    z-index: 10;

    background-color: #fff;

    width: 100%;

    top: 0;

    left: 0;

    align-items: center;

    justify-content: space-around;

    border-top: 2rpx solid #ddd;

    border-bottom: 2rpx solid #ddd;

    font-size: 11pt;

    color: #bdbdbd;

    }

    .line {

    width: 2rpx;

    height: 100%;

    background-color: #ddd;

    }

    两个菜单中间的分割线,我使用了一个view,当然依然可以使用border属性。在此处给加个z-index属性。稍后会介绍到他的作用。

    弹出菜单实现

    全部

    待付款

    待发货

    配送中

    待收货

    待评价

    退款

    已取消

    开始日期:

    {{begin==null?'不限':begin}}

    结束日期:

    {{end==null?'不限' : end}}

    确定

    样式

    .state-menu {

    display: flex;

    position: fixed;

    left: 0;

    height: 200rpx;

    top: 80rpx;

    width: 100%;

    z-index: 9;

    background-color: #fff;

    flex-direction: row;

    border-bottom: 2rpx solid #ddd;

    justify-content: space-around;

    align-items: center;

    flex-wrap: wrap;

    }

    .state-item {

    width: 20%;

    height: 70rpx;

    font-size: 11pt;

    line-height: 70rpx;

    text-align: center;

    border-radius: 10rpx;

    border: 2rpx solid #ddd;

    }

    .border.state-item {

    border: 2rpx solid #c4245c;

    }

    .date {

    min-width: 40%;

    display: flex;

    font-size: 11pt;

    color: #bdbdbd;

    align-items: center;

    }

    .date-btn {

    min-width: 80%;

    font-size: 12pt;

    background-color: #c4245c;

    color: #fff;

    }

    弹出菜单我们设置高度为200rpx,依然使用position属性fixed将其固定在菜单按钮下面,由于菜单按钮我们设置的高度是80rpx,为了显示在菜单按钮下面,我们将top设置为80rpx.flex-wrap指定为wrap作用就是当item超出屏幕宽度时自动换行。由于我们设置状态的state-item的宽度为20%,所以当显示四个item时会换新行显示(五个item100%再加上border会超过宽度,所以第五个在新行显示(使用box-sizing: border-box,可让border宽度输入item的宽度,即item的20%包含border宽度))。

    picker 组件是底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器(mode = selector),时间选择器(mode = time),日期选择器(mode = date),默认是普通选择器,所以我们在此处设置mode = date。并且可以通过start设置有效日期范围的开始,字符串格式为"YYYY-MM-DD",通过end设置有效日期范围的结束,字符串格式为"YYYY-MM-DD"。选择的日期通过e.detail.value获得。

    透明蒙版效果

    当我们使用系统组件picker 弹出选择器时,我们会看到有一个透明的蒙版效果,那么我们也实现一个蒙版效果

    样式

    .dialog-mask {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 8;

    background: rgba(0, 0, 0, 0.3);

    }

    我们给蒙版设置了一个点击事件当点击时直接隐藏弹出菜单,样式使用了position:fixed属性,并将top,left,right,bottom都设置为0,即将蒙版全屏显示,设置背景黑色,透明的为0.3.此处依然使用了 z-index, z-index是z轴显示的深度,值越大,离我们越近,即值大会显示在值小的上面。所以我们将蒙版 z-index设置为8,菜单按钮设置为10,弹出菜单设置为9.这样也就看到文章开头图中的效果。

    动画实现

    通过上面的实现,已经可以达到我们想要的效果,但是显示和隐藏的时候比较突兀,我们再给它加点动画,动画的实现其实很简单,在这里介绍两种实现动画的方式,第一个是直接使用在样式文件wxss中实现,另一种是通过微信小程序提供的动画Api实现。

    需要注意的是如果添加动画不能使用hidden属性显示隐藏弹出菜单,而是使用visibility,否则看不到动画效果。

    样式文件wxss实现方式:

    .hidden.state-menu {

    transform: translateY(-200rpx);

    transition: all 0.4s ease;

    visibility: hidden;

    }

    .show.state-menu {

    transform: translateY(0);

    transition: all 0.4s ease;

    visibility: visible;

    }

    API createAnimation创建动画方式

    微信小程序提供了createAnimation创建动画,包括平移,旋转,缩放,倾斜等,并且实现方式简单,在这里就不在详细介绍API了,具体可参看官方文档

    //定义变量

    var animation

    //在page中data中加入变量

    animationData: {}

    //onLoad初始化变量animation

    var animation = wx.createAnimation({

    duration: 500,

    transformOrigin: "50% 50%",

    timingFunction: 'ease',

    })

    this.animation = animation;

    // 执行动画函数

    startAnimation: function (isShow, offset) {

    var that = this

    var offsetTem

    if (offset == 0) {

    offsetTem = offset

    } else {

    offsetTem = offset + 'rpx'

    }

    //translateY可以加入单位(如20+'rpx'或者20+'vh',不写单位时默认px),当0时不能加单位,否则动画无效果

    this.animation.translateY(offset).step()

    this.setData({

    animationData: this.animation.export(),

    isVisible: isShow

    })

    },

    然后只需要在view标签中加入animation="{{animationData}}"就可以看到动画效果了。到这里,已经实现了所以效果,当然侧滑,或者从下面弹出,等都可以通过这个思想实现。文中js的一些逻辑代码没在文中贴出,代码我已上传Github,可以前往查看

    展开全文
  • 问:微信小程序菜单内容左右联动 (此图片来源于网络,如有侵权,请联系删除! ) 如图所以,左侧是菜单栏,右侧是主体内容,点击左侧菜单,右侧滑动到相应的位置;右侧滑动过程,也会改变左侧菜单的选中状态。本人的...
  • 实现菜单页面的编写,显示菜单选项,结合js文件实现相应功能
  • <p><strong>微信小程序怎么实现点击菜单,右边出现菜单,整个页面也移动了。</strong></p> <p><img alt="" height="1920" src=...
  • 问题:实现菜单栏目的分页,可以通过滑动来看下一页的菜单栏目。 方案: 1.使用swiper来做分页,每一页放10个图标。 2.对后台返回的数据进行分组 菜单节点 <swiper bindchange="swiperChange"> <swiper-...

    问题:实现菜单栏目的分页,可以通过滑动来看下一页的菜单栏目。

    在这里插入图片描述

    方案:

    1.使用swiper来做分页,每一页放10个图标。
    2.对后台返回的数据进行分组
    菜单节点

     <swiper bindchange="swiperChange">
       <swiper-item wx:for='{{menu}}' wx:key='index' class='icon_swiper_item'>
         <navigator url=" " class='icon_box' wx:for="{{item}}" wx:key="index"> 
           <image src='{{item.img}}' class='icon_img'/>
           <text>{{item.name}}</text>
         </navigator>
       </swiper-item> 
     </swiper>
    

    菜单样式

    .icon_swiper_item {
        display: flex;
        flex-wrap: wrap;
    }
    .icon_box {
        width: 20%;
        text-align: center;
        font-size: 24rpx;
        color: #666;
        padding: 10rpx 0;
    }
    .icon_img {
        width: 80rpx;
        height: 80rpx;
        border-radius: 8rpx;
        margin: auto;
        display: block;
        padding-bottom: 10rpx;
    }
    

    分组

    list: [
      {id: 274, name: "美食", icon: "/20200814/102608_2400.jpg"},
      {id: 278, name: "休闲", icon: "/20200814/102658_6659.jpg"},
      {id: 279, name: "酒店", icon: "/20200814/144728_2542.jpg"},
      {id: 280, name: "丽人", icon: "/20200814/144747_1050.jpg"},
      {id: 281, name: "生活", icon: "/20200814/144822_5159.jpg"},
      {id: 276, name: "外卖", icon: "/20200814/102735_4808.jpg"},
      {id: 282, name: "果蔬", icon: "/20200814/144601_2809.jpg"},
      {id: 283, name: "美酒", icon: "/20200814/144910_7476.jpg"},
      {id: 284, name: "零食", icon: "/20200814/144933_9356.jpg"},
      {id: 285, name: "百货", icon: "/20200814/145004_2528.jpg"},
    ]
    

    根据数组的索引进行分组,每组放10个

    let menu = [];
    for (let i in list)  {
      let index = parseInt(i/10);
      if (!menu[index]) menu[index] = [];
      menu[index].push(list[i]);
    };
    

    或是通过Math取整

     let index = Math.floor(i/10);
    
    展开全文
  • 首先是获取数据,并且获取数据的长度(需要根据长度来计算元素的高度),通过遍历数据的内容通过题目和元素个数的相加得到高度,当消失高度小于等于某个元素的高度就设定索引值给左边的菜单目录实现右边滑动左边联动...

    原理

    首先是获取数据,并且获取数据的长度(需要根据长度来计算元素的高度),通过遍历数据的内容通过题目和元素个数的相加得到高度,当消失高度小于等于某个元素的高度就设定索引值给左边的菜单目录实现右边滑动左边联动,左边的菜单点击事件联动比较简单就不说

    代码实现

    1. wxml
    <view class="menu">
            <view class="left-box">
                <scroll-view class="left_menu" scroll-with-animation  scroll-y="true" scroll-into-view="{{leftViewId}}">
                    <text class="menu-item {{index==currentIndex?'menu-active':''}}" wx:for="{{navList}}" wx:key="this" data-id="menu{{index}}" data-i="{{index}}" bindtap="changeMenu">{{item.c_name}}</text>
                </scroll-view>
            </view>
            <view class="right-box">
                <scroll-view class="right_menu" scroll-y='true'  scroll-with-animation scroll-into-view="{{rightViewId}}"  bindscroll="getScroll" enable-flex>
                    <view wx:for="{{navList}}" wx:key="this" class='pro-item' id="menu{{index}}">
                        <view class="right_menu_head">{{item.c_name}}</view>
                        <view class="list-box">
                            <view class="menu_list" wx:for-item='items' wx:for="{{item.list}}" wx:key="this">
                            <image src="{{items.url}}"></image>
                            <view>{{items.goodsName}}</view>
                        </view>
                    </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    
    1. wxss,这里使用的是less语法,vscode插件可编译
    .menu{
        .left-box{
            width: 180rpx;
            border-right: 1px solid #dfdfdf;
            position: fixed;
            left: 0;
            z-index: 10;
            top: 370rpx;
            box-sizing: border-box;
            height: 90%;
            background: #f0f0f0;
    
            .menu-item{
                display: inline-block;
                width: 180rpx;
                height: 88rpx;
                font-size: 26rpx;
                line-height: 88rpx;
                background: #fff;
                text-align: center;
                border-bottom: 1px solid #dfdfdf;
            }
    
            .menu-active{
                background: #f0f0f0;
                border-left: 10rpx  solid #333999;
            }
        }
        
        .right-box{
            width: 74%;
            position: fixed;
            top: 360rpx;
            height: 77%;
            right: 0;
            border-left: 20rpx;
            box-sizing: border-box;
            margin-top: 20rpx;
    
            .right_menu{
                height: 100%;
                box-sizing: border-box;
    
                .pro-item{
    
                    .right_menu_head{
                        height: 80rpx;
                        line-height: 80rpx;
                        font-size: 26rpx;
                        font-weight: 600;
                    }
    
                    &:last-child{
                        margin-bottom: 156rpx;
                    }
    
                    .list-box{
                        width: 100%;
                        // min-height: 380rpx;
                        display: flex;
                        flex-wrap: wrap;
                        background: #fff;
                        box-sizing: border-box;
                        border-radius: 10rpx;
                        font-size: 20rpx;
    
                        .menu_list{
                            width: 33.3%;
                            font-size: 20rpx;
                            padding: 20rpx 0;
                            text-align: center;
                            font-style: '微软雅黑';
    
                            image{
                                width: 100rpx;
                                height: 100rpx;
                            }
    
                            view{
                                color: #333;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                overflow: hidden;
                              }
                        }
                    }
                }
            }
        }
    }
    
    1. js文件
    data:{
    	navList:[..],//数据
    	currentIndex: 0,//左边对应的索引
        rightViewId: '',//点击事件右边的索引
    }
    
    getScroll(e) {//微信小程序中绑定滑动函数,每滑动一下都会触发
            let top = e.detail.scrollTop,
                h = 0,
                _this = this;
    
    
            for (let i = 0; i < this.data.navList.length; i++) {
                let dishSize = this.data.navList[i].list.length;//获取数据对应展示商品的json
                h += 38 + parseInt(dishSize / 3 * 80);//获取当前元素的高度,38是标题高度,80是元素高度
    
                if (top <= h) {//满足条件立刻停止循环,就会一直停留再当前索引,不满足当前就会自动到下一个菜单
                    _this.setData({
                        currentIndex: i
                    })
                    break;
                }
    
            }
    
        },
        changeMenu(e) {
            console.log(this.data.heightArr, this.data.topArr);
    
            this.setData({
                currentIndex: e.currentTarget.dataset.i,
                rightViewId: e.currentTarget.dataset.id
            })
    
        }
    

    展示图片

    在这里插入图片描述在这里插入图片描述

    展开全文
  • 微信小程序菜单栏进行切换页面

    千次阅读 2018-09-18 15:18:22
    一.页面wxml文件设计部分代码: &lt;view class='topTabSwiper'&gt; &lt;view class='tab {{currentData == 0 ? "tabBorer" : ""}}' data-current = "...view class='tab {{

    一.页面wxml文件设计部分代码:

    <view class='topTabSwiper'>

    <view class='tab {{currentData == 0 ? "tabBorer" : ""}}' data-current = "0" bindtap='checkCurrent'>推荐</view>

    <view class='tab {{currentData == 1 ? "tabBorer" : ""}}' data-current = "1" bindtap='checkCurrent'>热点</view>

    <view class='tab {{currentData == 2 ? "tabBorer" : ""}}' data-current = "2" bindtap='checkCurrent'>关注</view>

    </view>

    <swiper current="{{currentData}}" class='swiper' style="height:600px;" duration="300" bindchange="bindchange">

    <swiper-item><view class='swiper_con'>这是个推荐页面</view>

    </swiper-item>

    <swiper-item><view class='swiper_con'>这是个热点页面</view>

    <button type='primary' bindtap='ReDian'>热点进入</button>

    </swiper-item>

    <swiper-item><view class='swiper_con'>这是个关注页面</view></swiper-item>

    </swiper>

    二.js脚本进行切换页面部分代码:

    data: {

    currentData: 0,

    },

    /**

    * 生命周期函数--监听页面加载

    */

    onLoad: function (options) {

    },

    //获取当前滑块的index

    bindchange: function (e) {

    const that = this;

    that.setData({

    currentData: e.detail.current

    })

    },

    //点击切换,滑块index赋值

    checkCurrent: function (e) {

    const that = this;

     

    if (that.data.currentData === e.target.dataset.current) {

    return false;

    } else {

     

    that.setData({

    currentData: e.target.dataset.current

    })

    }

    }

    三.就是页面样式布局wxss代码:

    .tab{float: left; width: 33.3333%;text-align: center;padding: 10rpx 0; }

    .topTabSwiper{border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; zoom: 1;}

    .topTabSwiper:after{content: ""; clear: both;display: block;}

    .tabBorer{border-bottom: 1px solid #f00; color: #f00;}

    .swiper{width: 100%;}

    .swiper_con{text-align: center; width: 100%; height: 50%; padding: 80rpx 0;}

     

    展开全文
  • 从WXML中可以看到,菜单栏是否吸附是根据isSticky变量判断的,当页面滚动到菜单栏和header的交界点时,会发生明显的抖动,这是因为菜单栏从标准文档流变成position:fixed状态时,原本的页面高度发生了改变,页面的...
  • wxml部分 &lt;view class="...菜单栏&lt;/view&gt; wxss部分 .fixed{position: fixed; top: 0; } js部分 onShow: function () { var that = this; var query = wx.createSel...
  • 微信小程序下拉菜单实例,小程序的尝鲜制作,开发工具是0.9版,不过思想和原理是一样的,非常适合微信小程序入门。微信小程序下拉菜单思路与步骤:布局方面,整体使用dl来写,二级包在dd中,用ul li来写;交互方面,...
  • 微信小程序模拟下拉菜单开发实例,页面,列表,就会,子集,菜单微信小程序模拟下拉菜单开发实例易采站长站,站长之家为您整理了微信小程序模拟下拉菜单开发实例的相关内容。本文主要和大家分享微信小程序模拟下拉菜单...

空空如也

空空如也

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

微信小程序菜单

微信小程序 订阅