精华内容
下载资源
问答
  • 关于小程序菜单栏吸顶效果

    千次阅读 2018-08-14 17:39:46
    最近工作遇到关于小程序菜单栏吸顶的需求(例如某页面中间有个tabbar,要求当用户滑动该页面使tabbar到达屏幕顶部时,tabbar吸顶,页面滑动回来使tabbar回到原来的位置)  查了小程序的文档,没找到相关的功能介绍...

        最近工作遇到关于小程序菜单栏吸顶的需求(例如某页面中间有个tabbar,要求当用户滑动该页面使tabbar到达屏幕顶部时,tabbar吸顶,页面滑动回来使tabbar回到原来的位置)

        查了小程序的文档,没找到相关的功能介绍,但是找到了页面滚动监听事件  onPageScroll (e) { }

        我们捋一下思路,要实现吸顶,只要获取到页面已经滚动的高度A,以及tabbar到页面顶部的高度B,如果A大于等于B,则让tabbar吸顶

        1、滚动监听事件提供了参数e,e.scrollTop即可拿到页面已经滚动的高度,即页面顶部到屏幕顶部的距离A

        2、tabbar到页面顶部之间的组件高度相加即可得到tabbar到页面顶部的高度B,这里需要用到小程序节点的选取

            

        res.height即可拿到所选取的组件的高度

        3、if(e.scrollTop >= this.data.height) { 改变tarbar的样式(固定定位在屏幕顶部) }

         

        框框内为优化措施,当bIsPaste为true时,setData不再执行,可有效避免页面的卡顿,以及吸顶时页面的抖动

        也可在tabbar下面的组件加入与tabbar高度一致的外边距,吸顶时生效,可在吸顶时为tabbar留出一定的位置,减小脱离文档流产生的页面抖动

    展开全文
  • 小程序菜单栏工具

    2020-09-24 14:58:37
    小程序自定义菜单栏分为三个功能: 1、回到首页 2、退出小程序 3、返回上一页 其中比较难想到的是退出小程序的实现方法,因为小城西官方文档中并没有提供具体的实现API,我在网上找了好一会,发现其中有一条解决方案...

    小程序自定义菜单栏分为三个功能:
    1、回到首页
    2、退出小程序
    3、返回上一页
    其中比较难想到的是退出小程序的实现方法,因为小城西官方文档中并没有提供具体的实现API,我在网上找了好一会,发现其中有一条解决方案是前几年的,我试过了,根本没有用,所以只能选第二个方案,就是小程序后来提供的navigator组件可以实现,但是他只支持2.1.0版本库以上的,具体实现代码如下:

    <view class="menu">
      <view class="fixed">
        <view class="flex">
          <image src="" bindtap="toHomePage"></image>
          <view class="father">
            <navigator open-type="exit" target="miniProgram" class="son">退出</navigator>
            <image src="" bindtap="leaveApp"></image>
          </view>
          <image src="" bindtap="backPrev"></image>
        </view>
      </view>
    </view>
    
    toHomePage() {
          wx.switchTab({
            url: '/pages/index/home/home',
          })
        },
    backPrev(){
          wx.navigateBack({
            delta: -1,
          })
        }
    
    展开全文
  • 小程序 菜单栏点击切换页面 页面可左右滑动 — html <!--首页--> <view class="homePage"> <!-- 导航栏 --> <view class="container"> <!-- tab导航栏 --> <!-- scroll-left...

    小程序 菜单栏点击切换页面 页面可左右滑动

    — html

    <!--首页-->
    <view class="homePage">
      <!-- 导航栏 -->
      <view class="container">
        <!-- tab导航栏 -->
        <!-- scroll-left属性可以控制滚动条位置 -->
        <!-- scroll-with-animation滚动添加动画过渡 -->
        <scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
          <block wx:for="{{navData}}" wx:for-index="idx" wx:key="*this">
            <view class="nav-item {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav">
              <view class="name">{{item.HotName}}</view>
              <view class="lin"></view>
            </view>
          </block>
        </scroll-view>
        <!-- 页面内容 -->
        <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">
          <swiper-item wx:for="{{navData}}" wx:for-index="idx" wx:key="idx" class="tab-content">
            <view class="ul" wx:if="{{currentTab==idx}}">
                <view class="li">
                  {{productList[idx].HotName}}
                </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
    

    — js

    // pages/detail/detail.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        flag: false,
        navData: [
          {
          HotName: '饮食'
          },
          {
            HotName: '健康'
          },
          {
            HotName: '个护'
          },
          {
            HotName: '居家'
          },
          {
            HotName: '清洁'
          },
          {
            HotName: '美妆'
          },
          {
            HotName: '护肤'
          }
    
        ],// 商品分类列表
        currentTab: 0,
        navScrollLeft: 0,
        productList: [
          {
            HotName: '饮食页面'
          },
          {
            HotName: '健康页面'
          },
          {
            HotName: '个护页面'
          },
          {
            HotName: '居家页面'
          },
          {
            HotName: '清洁页面'
          },
          {
            HotName: '美妆页面'
          },
          {
            HotName: '护肤页面'
          }
        ],// 热销商品列表
        addnum: 1
      },
      setTab: function (e) {
        const edata = e.currentTarget.dataset;
        this.setData({
          showtab: edata.tabindex,
    
        })
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (e) {
        // 获取系统信息
        wx.getSystemInfo({
          success: (res) => {
            this.setData({
              pixelRatio: res.pixelRatio,
              windowHeight: res.windowHeight,
              windowWidth: res.windowWidth
            })
          },
        })
      },
      // 导航栏点击项居中
      switchNav(event) {
    
        // 下标
        var cur = event.currentTarget.dataset.current;
        //每个tab选项宽度占1/5          手机宽度/5
        var singleNavWidth = this.data.windowWidth / 5;
        //tab选项居中                            
        this.setData({
          navScrollLeft: (cur - 2) * singleNavWidth
        })
        if (this.data.currentTab == cur) {
          return false;
        } else {
          this.setData({
            currentTab: cur,
            flag: false,
            // productList: []
          })
        }
      },
      // 滑动页面切换
      switchTab(event) {
        var cur = event.detail.current;
        var singleNavWidth = this.data.windowWidth / 5;
        this.setData({
          currentTab: cur,
          navScrollLeft: (cur - 2) * singleNavWidth
        });
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
    })
    

    —css

    /* pages/home/home.wxss */
    page {
      width: 100%;
      height: 100%;
    }
    .homePage {
      width: 100%;
      height: 100%;
    }
    .container {
      width: 100%;
      height: 100%;
      background-color: #eee;
    }
    .nav {
        height: 80rpx;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        background: #f7f7f7;
        font-size: 16px;
        white-space: nowrap;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
    }
    
    .nav-item {
        width: 20%;
        display: inline-block;
        text-align: center;
    }
    .nav-item .name {
        width: 100%;
        font-size: 24rpx;
        line-height: 76rpx;
        flex: 1;
      }
      .nav-item .lin {
        width: 64rpx;
        border: 4rpx solid rgba(255, 255, 255, 0);
        border-radius: 2rpx;
        margin: auto;
      }
    .nav-item.active{
        color: red;
    }
    .nav-item.active .lin {
        margin: auto;
        border: 4rpx solid #EB5902;
        border-radius: 2rpx;
        background-color: #EB5902;
        width: 64rpx;
      }
    .tab-box {
      padding-top: 80rpx;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }
    .tab-content {
      overflow-y: scroll;
    }
    .s_swiper {
      width: 100%;
      height: 250rpx;
    }
    .s_swiper navigator {
      width: 100%;
      height: 100%;
    }
    .s_swiper navigator image {
      width: 100%;
      height: 100%;
    }
    .classlist {
      width: 710rpx;
      border-radius: 20rpx;
      margin: 0 auto;
      margin-top: 20rpx;
    }
    .classlist .title {
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      border-bottom: 1rpx solid #eee;
    }
    .classlist .c_content {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }
    .c_content navigator {
      box-sizing: border-box;
      width: 50%;
      border-bottom: 2rpx solid #eee;
    }
    .c_content navigator:nth-child(odd) {
      border-right: 2rpx solid #eee;
    }
    .c_content navigator image {
      display: block;
      width: 100%;
    }
    .ul {
      width: 710rpx;
      margin: 0 auto;
      margin-top: 20rpx;
      margin-bottom: 100rpx;
      /*height:1030rpx;*/
      overflow: hidden;
      overflow-y: scroll;
      border-radius: 14rpx;
    }
    .ul .li {
      position: relative;
      display: flex;
      align-items: center;
      height: 170rpx;
      padding: 30rpx 0;
      padding-left: 28rpx;
      padding-right: 16rpx;
      background-color: #fff;
      border-bottom: 1rpx solid #eee;
    }
    

    样式如图
    在这里插入图片描述

    展开全文
  • 问题:实现菜单栏目的分页,可以通过滑动来看下一页的菜单栏目。 方案: 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);
    
    展开全文
  • 小程序菜单栏吸顶效果

    千次阅读 2018-08-22 23:07:40
    需要用到页面滚动监听事件onPageScroll (e) { } //index.wxml < view class ...//当滚动位置大于190px并且type...setData 是小程序开发中使用最频繁的接口,也是最容易引发性能问题的接口。因此尽量减少setData
  • 小程序菜单栏型弹出框

    千次阅读 2018-06-22 11:31:17
    这是用的小程序自带的动画事件来是我们的弹出框显示和var animation; Page({ /** * 页面的初始数据 */ data: { animationData: {} }, tanchu:function(){ animation = wx.createAnim...
  • 微信小程序菜单栏进行切换页面

    千次阅读 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中可以看到,菜单栏是否吸附是根据isSticky变量判断的,当页面滚动到菜单栏和header的交界点时,会发生明显的抖动,这是因为菜单栏从标准文档流变成position:fixed状态时,原本的页面高度发生了改变,页面的...
  • 这是Tom老师精心准备的课程,希望同学们好好学习。 1、微信小程序菜单栏和滚动图片的需求和相关知识点讲解 2、微信小程序菜单栏的设计 3、微信小程序滚动图片的设计
  • pulldown 微信小程序联想搜索菜单栏
  • 小程序滑动菜单栏吸顶

    万次阅读 2018-06-28 20:58:27
    1. 效果图 菜单正常嵌入在页面中 菜单位置滑动到距离可视窗口0px时,脱离文档流固定在页面顶部 ... menuTop菜单栏距离文档顶部的距离时,菜单栏固定定位 &lt;view class="menu {{menuFixed...
  • 微信小程序导航栏或菜单栏吸顶效果简单实现 思路: 1、获取导航栏初始位置距顶部的距离s1(通过获取页面标签方法) 2、监听页面的滑动,获取滑动距离s2(使用onPageScroll) 3、当s2&gt;=s1时,给导航栏增加固定...
  • 小程序自定义底部菜单栏

    万次阅读 2018-08-26 02:09:19
    问题:小程序的底部菜单栏基本的样式根本不能满足我们的审美要求,所以我们可以通过自己来自定义一套小程序底部栏,可以设置透明背景哟,想要什么样式都可以自己定义,好了,废话不多说,直接上代码! 首先在和...
  • 主要为大家详细介绍了微信小程序实现顶部下拉菜单栏,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • #coding=utf-8 import wx class MyFrame(wx.Frame): def __init__(self): wx.Frame.__init__(self,None,-1,"python菜单栏练习") self.panel = wx.Panel(self) #设置菜单栏与子菜单 menubar ...
  • 微信小程序左边菜单栏

    千次阅读 2019-05-30 16:34:13
    "navigationBarTitleText": "左边菜单栏", "navigationBarTextStyle": "black", "disableScroll":true } 数据文件 var dataList = [ { title: '人气Top', products: [ { img:'...
  • 1. 先来看一下未滑动的效果,(样式随便写的,希望尽量简单) 2.滑动到菜单栏之后的吸顶效果 ...1.获取菜单栏距离文档顶部的距离,也就是头部区域的高度headHeight,使用小程序的api,可以...

空空如也

空空如也

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

小程序菜单栏