微信小程序仿今日头条导航栏滚动解析

2026-05-05 17:13:29

项目需要，做一个和今日头条一样的导航栏，可以横行滚动，幸好再weui里面看到了类似的例子

地址：https://weui.shanliwawa.top/demo/js4.html，使用iscroll-lite.j实现，weui自己封装了一层，vue中实现代码：

<div id="tab-tip" class="container">
  <div id="tagnav" class="weui-navigator weui-navigator-wrapper" style="touch-action: none;padding-left:5px">
   <ul class="weui-navigator-list first_nav">
    <li class v-for="group in groupList">
     <a href="javascript:;" rel="external nofollow" :groupId="group.id" @click="loadData(group.id)">{{group.name}}</a>
    </li>
   </ul>
  </div>
 </div> 初始化：
mounted() {
　　setTimeout(function() {
　　TagNav("#tagnav", {
　　type: "scrollToNext",
　　curClassName: "weui-state-active",
　　index: 0
　　});
　　$(".first_nav")
　　.children(":first")
　　.find("a")
　　.addClass("first_border_circle");
　　$(".first_nav")
　　.children(":last")
　　.find("a")
　　.addClass("end_border_circle");
　　}, 0);
},

注意：引入weui的css，class="container"这个一定要有，不然出现定位出现问题。

setimeout等元素渲染完成再初始化。

当然做这个项目的时候出现了一个问题，安卓手机第一次进入页面，非导航栏滑动的时候敏感，导致本来是滑动，触发了click事件，导致跳转

通过查找了许多资料，因为iscroll-lite默认事件touchend等绑定再window上，不是绑定再我们滚动的元素（上面例子：id="tagnav"的div），导致

点击其他的区域触发了click事件，幸好看到它有配置项：bindToWrapper，把这个值设定为true解决

因为weui重新封装了，所以找到，添加：bindToWrapper: true即可解决

self.iScroll = new IScroll(self.el, {
scrollX: true,
scrollY: false,
click: true,
bindToWrapper: true//防止touchend等事件绑定到window,导致滑动敏感触发
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序顶部可滚动导航效果

需求是小程序做头部做导航分类的效果顶部用 scroll-view 组件横向滚动,类似tab选项卡的效果,内容用类似模板方式引用,可重复利用 <scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%"> <view wx:for="{{classify}}" wx:key="id" data-type
微信小程序scroll-view实现滚动穿透和阻止滚动的方法

scroll-view滚动穿透,阻止滚动页面弹窗阻止滚动是一种常见的问题,这里简单介绍小程序scroll-view的一种解决方式常用阻止滚动方式在不使用scroll-view的弹窗中, 为position为absolute或fixed的元素设置catchtouchmove空事件就可以阻止弹窗下的页面因事件穿透滚动 <view catchtouchmove="doNothing"></view> 也可直接写catchtouchmove,相当于绑定了事件名为t
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现

一.实践踩坑项目使用mpvue开发 1. scroll-view默认是不滚动的..所以要先设置scroll-x="true"或者scroll-y="true" 2. 在scroll-view里面添加定宽元素,超过scroll-view宽度(设置了100%,即屏幕宽度)后,它竟然换行了.所以要scroll-view的样式要这样设置: scroll-view { width: 100%; white-space: nowrap; // 不让它换行 } 3. 然后在定宽
微信小程序 scroll-view隐藏滚动条详解

一:scroll-view隐藏滚动条在书写网页的时候,往往会为了页面的美观,而选择去掉滚动区域默认的滚动条,而在这里,就是为小程序去掉滚动条的其中的一种方法: scroll-view.wxml: scroll-view.wxss scroll-view.js 最终显示效果如下; 注意: (1)不能在scroll-view中使用textarea,mao,canvas,video组件 (2)scroll-init-view的优先级高于scroll-top (3)onPullDownRefresh事
微信小程序-滚动消息通知的实例代码

写在前面: 这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器. 我们通过vertical属性(默认为false,实现默认左右滚动)设置为true来实现上下滚动. (需要注意的是:只要你的swiper存在vertical属性,无论你给值为true或者false或者不设参数值,都将实现上下滚动) 从深圳回来做了一个微信小程序的小项目,令人欣慰的一点事是,回来很快时间内把在深圳两天的房租给赚回来了,哈哈... wxml <s
微信小程序--特定区域滚动到顶部时固定的方法

项目要求: 如图所示,当页面滚动到导航条到达搜索栏下方时固定,向上滚动到导航条位置时又恢复原样. 以下是代码展示: 1.wxml <scroll-view style="width:100%;height: 100%;" scroll-y="true" bindscroll="scrollTopFun"> <view class="{{top>130 ? 'topnav' : ''}}"> <
微信小程序页面上下滚动效果

本文实例为大家分享了微信小程序页面上下滚动的具体代码,供大家参考,具体内容如下看图源码 <view class="container container-fill"> <view class="scroll-fullpage" bindtouchstart="scrollTouchstart" bindtouchmove="scrollTouchmove" bindtouchend="scrol
微信小程序仿今日头条导航栏滚动解析

项目需要,做一个和今日头条一样的导航栏,可以横行滚动,幸好再weui里面看到了类似的例子地址:https://weui.shanliwawa.top/demo/js4.html,使用iscroll-lite.j实现,weui自己封装了一层,vue中实现代码: <div id="tab-tip" class="container"> <div id="tagnav" class="weui-navigator weui
微信小程序开发之顶部导航栏实例代码

微信小程序开发之顶部导航栏需求:顶部导航栏效果图: wxml:  <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap=
微信小程序实现左侧滑动导航栏

本文实例为大家分享了微信小程序实现左侧滑动导航栏的具体代码,供大家参考,具体内容如下左侧滑动导航栏如图 wxml  <view class='under_line'></view> <view style='float: left' class='left'> <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}&quo
微信小程序点击顶部导航栏切换样式代码实例

这篇文章主要介绍了微信小程序点击顶部导航栏切换样式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下类似这样的效果 <view class='helpCateList'>  <scroll-view class='scroll-view' scroll-x="true"> <view class="item-content" wx:key=&qu
微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例）

前言 navigationBar相信大家都不陌生把?今天我们就来说说自定义navigationBar,把它改变成我们想要的样子(搜索框+胶囊.搜索框+返回按钮+胶囊等). 思路隐藏原生样式获取胶囊按钮.状态栏相关数据以供后续计算根据不同机型计算出该机型的导航栏高度,进行适配编写新的导航栏引用到页面正文一.隐藏原生的navigationBar window全局配置里有个参数:navigationStyle(导航栏样式),default=默认样式,custom=自定义样式. "wind
微信小程序实战之顶部导航栏（选项卡）（1）

本文实例为大家分享了微信小程序顶部导航栏的具体代码,供大家参考,具体内容如下需求:顶部导航栏效果图: wxml:  <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key=&qu
微信小程序实战之顶部导航栏(选项卡)(1)

本文实例为大家分享了微信小程序顶部导航栏的具体代码,供大家参考,具体内容如下需求:顶部导航栏效果图: wxml:  <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key=&qu
微信小程序实现点击导航标签滚动定位到对应位置

本文要实现的是点击标签滚动定位到对应位置,且给在当前板块范围指定的导航标签添加样式效果的话看下面GIF wxml部分 top当前离顶部滚动的距离 block_ScrollTop是当前模块离顶部的距离,多减60是因为我的导航是悬浮的,会挡住部分内容,自行修改: specify-style是我自定义选中标签时的样式,可自行更改:  <view class='nav' id="tab-con"> <view class='resume-t
uniapp小程序配置tabbar底部导航栏实战指南

目录前言: 正文 Tips 1.首先我们准备好自己项目所需要的tab图标 2.找到我们的pages.json文件进行配置 3.配置一下导航栏标题内容 4.来看看我们的成果(效果图) 总结前言: 配置底部导航栏首先需要大家准备好自己想要使用的图标,每个tab可以选择两个图标,分别为选中前的和选中后的.之后我们根据uniapp官网提供的 uniapp官网tabbar配置项,话不多说直接上正文一起来学习一下如何配置底部导航栏吧. 正文首先我们先看一下官网中的介绍:如果应用是一个多 tab 应用,
微信小程序仿猫眼实现实例代码

微信小程序仿猫眼实现效果图: movie.js Page({ data: { movies:null, scrollTop : 0, scrollHeight:0 }, onLoad: function (options) { // 生命周期函数--监听页面加载 // 这里要非常注意,微信的scroll-view必须要设置高度才能监听滚动事件,所以,需要在页面的onLoad事件中给scroll-view的高度赋值 var that = this; wx.getSystemInfo({ succ

微信小程序仿今日头条导航栏滚动解析

相关推荐

随机推荐