草庐IT

微信小程序实现点击左侧导航栏自动定位到对应的位置

Bonny雨曦 2023-06-21 原文

我要实现的效果是点击左侧导航栏，右侧区域会自动滚动到相应的位置显示，其中当选择品牌的时候，右侧是有索引栏的。效果图如下：

刚开始的时候我是用微信小程序自带的组件scroll-view是实现点击左侧导航栏的跳转功能，其中scroll-into-view就是用来跳转到指定的位置，scroll-into-view="{{index}}"的index是下面的view里面对应的id。

    <scroll-view scroll-y scroll-into-view="{{ index }}"  scroll-with-animation bindscroll="scroll"> 
      <view class="special" id="special">
        <view>特别选项</view>
      </view>
      <view class="brand" id="brand">
        <view>品牌</view>
        
      </view>
      <view class="type" id="type">

      </view>
      <view class="price" id="price"></view>
      <view class="mileage" id="mileage"></view>
      <view class="emissions" id="emissions"></view>
    </scroll-view>

然后右侧的字母索引这部分，我用到了vant的组件IndexBar 索引栏，这部分的实现代码如下

<van-index-bar highlight-color="#FFF" scroll-top="{{ scrollTop }}" index-list="{{ indexList }}" z-index="1000"> 
            <view wx:for="{{ customList }}" wx:key="index" class="indexBox">
              <van-index-anchor use-slot index="{{ item.firstLetter }}">
                <text>{{ item.firstLetter }}</text>
              </van-index-anchor>
              <van-cell clickable wx:for="{{item.list}}" wx:key="index" data-id="{{item.id}}" data-name="{{item.name}}" title="{{item.name}}" bindtap="gotoSelect" />
          </view>
          </van-index-bar>

highlight-color是指定了索引字符的高亮颜色 ，就是当你浏览的这个区域是什么索引的区域，这个字母就会显示为你指定的颜色；index-list就是你的索引列表，这个可以自定义，在js部分进行设置，页面上的索引列表就可以根据你设置的内容来显示了。

到这一步我发现了问题van-index-bar的索引效果出不来了，点击索引列表没有反应。

 查阅资料才发现：由于 <van-index-bar /> 内部使用 wx.pageScrollTo 滚动到指定位置，因此只支持页面级滚动，无法在滚动元素中嵌套使用，例如：view 使用 overflow: scroll; 或者 scroll-view，具体可查看微信小程序文档

所以当同时scroll-view和van-index-bar的时候就出问题了。于是我只能修改思路，去掉scroll-view，用wx.pageScrollTo(Object object)和van-index-bar。即在js里面用

wx.pageScrollTo({
      selector:`#${kind}`
})

来控制点击左侧导航栏，右侧自动滚动到指定的区域，上面代码里的kind是页面代码中view的id，这里要注意kind前一定要带#，否则识别不出来。

这个时候基本功能都实现了，但是还有点问题，就是当你滑动右侧的界面到下面的时候，左侧的导航栏会不见，为了提高使用感，我们需要将左侧的导航栏弄成悬浮的。只需要在左侧的导航栏的样式里面加上position: fixed;就可以悬浮了，再加上height: 100%;左侧导航栏的背景颜色就能够全屏展示。

微信小程序微信xff0cviewxff0小程序前端

有关微信小程序实现点击左侧导航栏自动定位到对应的位置的更多相关文章

  1. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  2. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  3. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  4. 「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

  5. MIMO-OFDM无线通信技术及MATLAB实现（1）无线信道：传播和衰落 - 2

     MIMO技术的优缺点优点通过下面三个增益来总体概括：阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下，MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中，可以获得复用增益，即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中，可以获得分集增益，即可靠性性能的改善。分集增益用独立衰落支路数来描述，即分集指数。在使用了空时编码的MIMO系统中，由于接收天线或发射天线之间的间距较远，可认为它们各自的大尺度衰落是相互独立的，因此分布式MIMO

  6. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说，前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可，但要是匹配的code码比较多或者多个页面用到时，为了便于后期维护，后台就会使用字典表让前端匹配，下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs？{{method(a,b)}}可以看到，上述代码是一个调用方法传值的操作，在vue中很常见，多用于数据之间的转换，但由于微信小程序诸多限制的原因，你并不能优雅的这样操作，可能有人会说，为什么不用if判断实现呢？但是if判断的局限性在于如果存在数据量过大时，大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  7. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  8. 微信小程序开发入门与实战（Behaviors使用） - 2

    @作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序（🔥）目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中，用于实现

  9. 【Java入门】使用Java实现文件夹的遍历 - 2

    遍历文件夹我们通常是使用递归进行操作，这种方式比较简单，也比较容易理解。本文为大家介绍另一种不使用递归的方式，由于没有使用递归，只用到了循环和集合，所以效率更高一些！一、使用递归遍历文件夹整体思路1、使用File封装初始目录，2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组，取出每个File对象4-1、如果File是否是一个文件，打印4-2、否则就是一个目录，递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg

  10. ruby - 正则表达式在哪个位置失败？ - 2

    我需要一个非常简单的字符串验证器来显示第一个符号与所需格式不对应的位置。我想使用正则表达式，但在这种情况下，我必须找到与表达式相对应的字符串停止的位置，但我找不到可以做到这一点的方法。(这一定是一种相当简单的方法……也许没有？)例如，如果我有正则表达式:/^Q+E+R+$/带字符串:"QQQQEEE2ER"期望的结果应该是7 最佳答案 一个想法:你可以做的是标记你的模式并用可选的嵌套捕获组编写它:^(Q+(E+(R+($)?)?)?)?然后你只需要计算你获得的捕获组的数量就可以知道正则表达式引擎在模式中停止的位置，你可以确定匹配结束

随机推荐