微信小程序页面向下滚动时tab栏固定页面顶部实例讲解

先看一下效果图：

index.wxml

 <view class='{{tabIsTop ? "fixedTop" : ""}}'>
 <i-tabs tabcurrent="{{tabcurrent}}" color="#FF0000" bindchange="tabChange">
 <i-tab key="tab1" title="车主圈"></i-tab>
 <i-tab key="tab2" title="行业新闻"></i-tab>
 <i-tab key="tab3" title="养护宝典"></i-tab>
 <i-tab key="tab4" title="自驾游"></i-tab>
 </i-tabs>
 </view>

特别说明：这里使用的tab标签页是iviewui的框架，地址：https://weapp.iviewui.com/components/tabs

index.wxss

.fixedTop {
 width: 100%;
 position: fixed;
 top: 0;
 z-index: 99;
}

index.js

Page({
 /**
 * 页面的初始数据
 */
 data: {
 tabcurrent: 'tab1',
 tabIsTop:false,
 scrollTop: 0,
 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {

 },
 ontabChange(event) {
 this.setData({ active: event.detail });
 },
 //监听屏幕滚动 判断上下滚动
 onPageScroll: function (ev) {
 var _this = this;
 //当滚动的top值最大或最小时，为什么要做这一步是因为在手机实测小程序的时候会发生滚动条回弹，所以为了处理回弹，设置默认最大最小值
 if (ev.scrollTop <= 0) {
  // 滚动到最顶部
  ev.scrollTop = 0;
  this.setData({ tabIsTop: false });
 } else if (ev.scrollTop > wx.getSystemInfoSync().windowHeight) {
  // 滚动到最底部
  ev.scrollTop = wx.getSystemInfoSync().windowHeight;
 }
 //判断浏览器滚动条上下滚动
 if (ev.scrollTop > this.data.scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight) {
  //向下滚动
  this.setData({ tabIsTop: true });
 } else {
  //向上滚动
 }
 //给scrollTop重新赋值
 setTimeout(function () {
  _this.setData({
  scrollTop: ev.scrollTop
  })
 }, 0)
 },
})

到此这篇关于微信小程序页面向下滚动时tab栏固定页面顶部实例讲解的文章就介绍到这了,更多相关微信小程序页面向下滚动时tab栏固定页面顶部内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Spring Boot 2结合Spring security + JWT实现微信小程序登录

    项目源码:https://gitee.com/tanwubo/jwt-spring-security-demo 登录 通过自定义的WxAppletAuthenticationFilter替换默认的UsernamePasswordAuthenticationFilter,在UsernamePasswordAuthenticationFilter中可任意定制自己的登录方式. 用户认证 需要结合JWT来实现用户认证,第一步登录成功后如何颁发token. public class CustomAuthe

  • 使用Typescript开发微信小程序的步骤详解

    使用Typescript开发微信小程序的步骤详解

    Typescript的优势咱不需要赘述太多,有兴趣可以参考(https://www.typescriptlang.org/).今天给大家分享一下如何在微信小程序(或者其他同类小程序)开发中使用Typescript. 这个分两种情况,最简单的做法就是在创建项目时,选择Typescript这个选项,如下图所示.但要注意,这个选项只有在选择"Use no cloud service"才有,而另外一种Mini Program Cloud Base则不支持.这个可能是开发工具还没有跟上吧,希望以

  • 微信小程序之高德地图多点路线规划过程示例详解

    微信小程序之高德地图多点路线规划过程示例详解

    调用 如何调用高德api? 高德官方给出的https://lbs.amap.com/api/wx/summary/开放文档比较详细: 第一步,注册高德开发者 第二部,去控制台创建应用 即点击右上角的控制平台创建应用 创建应用绑定服务记得选择微信小程序:同时在https://lbs.amap.com/api/wx/gettingstarted中下载开发包 第三步,登陆微信公众平台在开发设置中将高德域名配置上 https://restapi.amap.com 第四步,打开微信开发者工具,打开微信小程

  • springboot+jwt+springSecurity微信小程序授权登录问题

    springboot+jwt+springSecurity微信小程序授权登录问题

    场景重现:1.微信小程序向后台发送请求 --而后台web采用的springSecuriry没有token生成,就会拦截请求,,所以小编记录下这个问题 微信小程序授权登录问题 思路 参考网上一大堆资料 核心关键字: 自定义授权+鉴权 (说的通俗就是解决办法就是改造springSecurity的过滤器) 参考文章 https://www.jb51.net/article/204704.htm 总的来说的 通过自定义的WxAppletAuthenticationFilter替换默认的UsernameP

  • 微信小程序页面向下滚动时tab栏固定页面顶部实例讲解

    微信小程序页面向下滚动时tab栏固定页面顶部实例讲解

    先看一下效果图: index.wxml <view class='{{tabIsTop ? "fixedTop" : ""}}'> <i-tabs tabcurrent="{{tabcurrent}}" color="#FF0000" bindchange="tabChange"> <i-tab key="tab1" title="车主圈"

  • 解决uni-app微信小程序input输入框在底部时,键盘弹起页面整体上移问题

    解决uni-app微信小程序input输入框在底部时,键盘弹起页面整体上移问题

    目录 问题描述: 问题分析: 解决思路: 重点在这里!!!我踩坑被折磨很久的一个地方!!!一定要用 px!!! 总结: 问题描述: 最近的做了个客服聊天的功能,遇到一个问题如下:在手机上点击聊天页底部的input框后,键盘弹起同时页面会整体上移,标题栏被顶上去了.如下图: 问题分析: input 获取焦点时会自动调起手机键盘,设置 :adjust-position="true",会导致键盘弹起时页面整体上移 解决思路: 设置使键盘弹起使页面不上移 设置输入框所在盒子为绝对定位 键盘弹起

  • 微信小程序web-view环境下H5跳转小程序页面方法实例代码

    目录 引言 1.在H5页面引入JSSDK 2.跳转至小程序页面方法 总结 引言 一般的,web-view组件的src属性指定的H5页面之间,可以正常的采用超级链接a标记对进行页面之间的条转.但是web-view页面要想通过手指触碰返回小程序页面,就无法使用超级链接a标记了.那么这个问题应该如何解决呢? 1.在H5页面引入JSSDK 首先需要在H5页面中引入JSSDK,它可以让H5页面的js文件执行微信小程序的部分API命令.H5页面引入JSSDK的代码如下所示. <script src="

  • 我要点爆”微信小程序云开发之项目建立与我的页面功能实现

    开发环境搭建 使用自己的AppID新建小程序项目,后端服务选择小程序·云开发,点击新建,完成项目新建. 新建成功后跳转到开发者工具界面 新建后,微信端为我们提供了一个参考的模板程序,这里我们自己来创建各个所需的文件与代码,所以删除所有不需要的文件,删除cloudfunctions.miniprogram/images.miniprogram/pages文件下所有文件,同时也删除style文件和删除app.json中原始的页面配置. 此时编译下方控制台会报"VM8100:5 appJSON[&qu

  • 微信小程序自定义select下拉选项框组件的实现代码

    知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件,这样只需引入组件和添加数据,其它的不用管,就能实现多个地方重复使用了. 第一步:创建组件所需的文件 我喜欢把共用的内容都放在和pages文件同级的地方,所以有了下面的目录结构 (1) 先创建一个自定义名字的文件夹,例如我上面的Componet (2) 再创建一个select文件夹,然后:右键这个文件

  • 微信小程序scroll-view实现字幕滚动

    本文实例为大家分享了微信小程序scroll-view实现字幕滚动的具体代码,供大家参考,具体内容如下 需求: 实现框内的文字自下而上的自动循环滚动. 解决方案: demo:字幕滚动 通过控制滑动条来完成字幕滚动,通过setinterval完成字幕循环滚动. wxml: <scroll-view class="container" scroll-y="true" bindscroll="scroll" scroll-top="{{s

  • 微信小程序picker组件下拉框选择input输入框的实例

    微信小程序picker组件下拉框选择input输入框的实例

    微信小程序picker组件下拉框选择input输入框的实例 实现效果图: 页面 <view class="row-wrap"> <view class="label">预约项目</view> <picker bindchange="bindCasPickerChange" value="{{casIndex1}}" range="{{casArray}}">

  • 微信小程序图片加载失败时替换为默认图片的方法

    微信小程序图片加载失败时替换为默认图片的方法

    先看一下效果图: 1.第一种情况:单独加载一个图片 index.wxml代码: <image class="userinfo-avatar" src="{{avatar}}" binderror="errorFunction"></image> index.js代码: errorFunction: function(){ this.setData({ avatar: '/image/default.png' }) } 2.

  • 微信小程序自定义select下拉选项框的方法

    微信小程序自定义select下拉选项框的方法

    本文实例为大家分享了微信小程序自定义select下拉选项框的具体代码,供大家参考,具体内容如下 第一步:创建组件所需的文件 第二步:开始配置组件 select.json {   "component": true,   "usingComponents": {     "select": "./select"   } } 第三步:自定义组件样式及js select.wxml <view class='com-select

  • 微信小程序本作用域下调用全局JS详解及实例

    微信小程序本作用域下调用全局JS详解 本地wxml文件 <view> app版本:{{version}} </view> 本地js文件 var app; Page({ data:{ }, onLoad:function() { app = getApp(); this.setData({version:app.globalData.appName}); } }) 全局js文件 //app.js App({ globalData:{ appName:"hcoder"

随机推荐