1.wxml代码:
<view class="page"> <import src="../../components/catering-item/catering-item.wxml" /> <!-- 左侧滚动栏 --> <view class='under_line'></view> <view class="body"> <view style='float: left' class='left'> <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY' style='height: {{winHeight}}px'> <view class='all clear'> <block wx:key="tabs" wx:for="{{tabs}}"> <view bindtap='jumpIndex' data-menuindex='{{index}}'data-anchor='{{item.anchor}}'> <view class="text-style {{indexId==index?' activeView':''}}"> <text class="{{indexId==index?'active1':''}}">{{item.title}}</text> </view> </view> </block> </view> </scroll-view> </view> <view class="right" style='height: {{winHeight}}px'> <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" bindscroll="scrollToLeft" scroll-into-view="{{toTitle}}" class='scrollRight' style='height: {{winHeight}}px'> <block wx:key="tabs" wx:for="{{tabs}}"> <view id="view-{{item.anchor}}"> <view class="title" id="title-{{item.anchor}}">{{item.title}}</view> <view class="orders" wx:for="{{tabsList[item.anchor]}}"> <template is="cateringItem" data="{{...item}}" /> </view> </view> </block> </scroll-view> </view> </view> </view>
2.wxss代码:
@import "../../components/catering-item/catering-item.wxss"; /* pages/catering.wxss */ .page { display: flex; flex-direction: column; width: 100%; /* background: #F7F4F8; */ background-image: linear-gradient(90deg, #FCFCFC 0%, #FCFCFC 99%); /* padding-top: 16px; */ } .under_line{ width: 100%; border-top: 1rpx solid #efefef; } ::-webkit-scrollbar{ width: 0; height: 0; color: transparent; } .body{ display: flex; width: 100%; } .scrollY { width: 200rpx; /* position: fixed; left: 0; top: 0; */ background: #F5F5F5; /* border-right: 1rpx solid #efefef; */ } /* scrollRight{ flex: 1; } */ .right{ flex: 1; /* height: 200rpx; */ /* background: #00FF00; */ } .left { border-top: 1rpx solid #efefef; border-right: 1rpx solid #efefef; } .text-style { width: 200rpx; height: 100rpx; line-height: 100rpx; text-align: center; font-size: 28rpx; font-family: PingFangSC-Semibold; color: rgba(51, 51, 51, 1); } .active1 { color: #E5D1A9; /* background: #FFF; */ } .activeView{ background: #FFF; } .active { display: block; width: 50rpx; height: 6rpx; background: #E5D1A9; position: relative; left: 75rpx; bottom: 30rpx; } .title{ margin-left: 32rpx; padding-top: 16rpx; font-size: 28rpx; /* padding-bottom: 16rpx; */ }
3.js代码
// pages/catering.js Page({ /** * 页面的初始数据 */ data: { tabs: [ { title: '特惠', anchor: 'a', }, { title: '必点', anchor: 'b', }, { title: '营养汤', anchor: 'c', }, { title: '主食', anchor: 'd', }, { title: '套餐', anchor: 'e', }, { title: '饮料', anchor: 'f', }, ], tabsList: { a: [{ price: 10.1, anchor: "a", index: 0, num: 0 }, { price: 10.2, anchor: "a", index: 1, num: 0 }, { price: 10.3, anchor: "a", index: 2, num: 0 },], b: [{ price: 10.4, anchor: "b", index: 0, num: 0 }, { price: 10.5, anchor: "b", index: 1, num: 0 }, { price: 10.6, anchor: "b", index: 2, num: 0 },], c: [{ price: 10.7, anchor: "c", index: 0, num: 0 }, { price: 10.8, anchor: "c", index: 1, num: 0 }, { price: 10.9, anchor: "c", index: 2, num: 0 },], d: [{ price: 11.0, anchor: "d", index: 0, num: 0 }, { price: 11.1, anchor: "d", index: 1, num: 0 }, { price: 11.2, anchor: "d", index: 2, num: 0 },], e: [{ price: 11.3, anchor: "e", index: 0, num: 0 }, { price: 11.4, anchor: "e", index: 1, num: 0 }, { price: 11.5, anchor: "e", index: 2, num: 0 },], f: [{ price: 11.6, anchor: "f", index: 0, num: 0 }, { price: 11.7, anchor: "f", index: 1, num: 0 }, { price: 11.8, anchor: "f", index: 2, num: 0 },] }, indexId: 0, toTitle:"title-c", scrollTop:0, top:[], }, // 左侧点击事件 jumpIndex(e) { let index = e.currentTarget.dataset.menuindex; let anchor = e.currentTarget.dataset.anchor; let that = this that.setData({ indexId: index, toTitle: "title-" + anchor }); //可以设置定位事件 }, scrollToLeft(res){ console.log("scrollToLeft-res:" + JSON.stringify(res) + JSON.stringify(this.data.top)); // let top=res.detail.scrollTop; this.setData({ scrollTop: res.detail.scrollTop }) var length = this.data.top.length; for(var i=0;i<this.data.top.length;i++){ if (this.data.top[i] - this.data.top[0] <= this.data.scrollTop && (i < length - 1 && this.data.top[i + 1] - this.data.top[0] > this.data.scrollTop)){ if(this.data.indexId!=i){ this.setData({ indexId: i, }); } } } // console.log("top:"+top); }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this wx.getSystemInfo({ success: function (res) { that.setData({ winHeight: res.windowHeight }); var top2=new Array(); for(var i=0;i<that.data.tabs.length;i++){ wx.createSelectorQuery().select('#view-' + that.data.tabs[i].anchor).boundingClientRect(function (rect) { var isTop=Number(rect.top); top2.push(isTop); console.log("view-c:" + JSON.stringify(rect)); }).exec(); } that.setData({ top: top2 }); } }); }, })
说明:
wxml中的template是菜品的item,可根据自己的需求进行定义。
使用到scroll-view的scroll-into-view属性用于对左侧菜单种类点击定位到右侧菜单的具体位置,js中的jumpIndex为用户点击左侧菜单,对应选中位置改变,和对右侧菜单进行定位。
js中scrollToLeft用于实现用户滚动右侧菜单,对左侧菜单分类进行定位操作,主要思想是将右侧菜单中的种类标签的top位置记录下来,当右侧scroll-view滑动的位置小于等于某一个top,而大于下一个top时,则更换左侧种类菜单到指定位置。
总结
到此这篇关于微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)的文章就介绍到这了,更多相关微信小程序 scroll-view实现滚动到锚点内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库!
本文向大家介绍微信小程序scroll-view锚点链接滚动跳转功能,包括了微信小程序scroll-view锚点链接滚动跳转功能的使用技巧和注意事项,需要的朋友参考一下 html js css 总结 以上所述是小编给大家介绍的微信小程序scroll-view锚点链接滚动跳转功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持! 如
本文向大家介绍微信小程序 scroll-view 实现锚点跳转功能,包括了微信小程序 scroll-view 实现锚点跳转功能的使用技巧和注意事项,需要的朋友参考一下 在微信小程序中,使用 scroll-view 实现长页面的标记跳转,官方文档中没有例子演示,锚点标记主要是使用<scroll-view> 的 scroll-into-view 属性。 实现锚点跳转主要以下几点: 1、最外层容
本文向大家介绍微信小程序 scroll-view实现锚点滑动的示例,包括了微信小程序 scroll-view实现锚点滑动的示例的使用技巧和注意事项,需要的朋友参考一下 前言 最近开始做小程序,通读一遍文档再上手并不算难,但不得不说小程序里还是有一些坑。这里说一下如何实现页面锚点跳转,一个城市列表的效果示意图如下: 因为在微信小程序的环境中不能想在浏览器里设置标签,或者操作dom滚动,传统做法就行不
问题内容: 我正在使用Bootstrap3,并且希望在用户滚动到我页面上的大标题图像时实现此效果。我需要导航栏的背景从透明变为白色。我查看了他们的代码,我知道它是用javascript完成的,甚至我认为它在哪里发生(在JS中查找ID’#main-header’)… 除了不知道高级Javascript之外,我正在寻找一种在滚动到特定点时将其应用于导航栏的方法。我的代码类称为“ navbar”,当它传
问题内容: 有没有一种方法可以使用jQuery向下滚动到锚链接? 喜欢: ? 问题答案: 这是我的方法: 然后,您只需要像这样创建锚:
问题内容: 我有一系列使用锚机制的链接: 我正在使用以下CSS: 一切正常。但是,当然,当我们单击链接时,它会从一个部分跳到下一个部分。因此,我想使用某种滚动到所选部分的开头进行平滑过渡。 我想我在Stackoverflow上读到,CSS3尚不可能(但现在),但是我想确认一下,并且我想知道什么是“可能的”解决方案。我很高兴使用JS,但不能使用jQuery。我试图在链接上使用on click功能,检
我需要一些帮助如何保持保持当前锚链接活动后刷新页面。实际上,我有这个垂直的navbar菜单(http://prntscr.com/fz9yct),默认情况下,我将类active添加到中,所以当我们打开页面时,navbar看起来就像您在屏幕截图中看到的那样。 当我滚动,或单击任何其他navbar列表项,一切工作良好,平滑滚动到适当的部分,并删除类活动从上一个锚链接,并添加到适当的。 问题是当我刷新p
问题内容: 我在使用jquery和附加到锚元素的click事件时遇到问题。[1]:jQuery超链接- href值?“这个” SO问题似乎是重复的,并且可接受的答案似乎并不能解决问题。对不起,这是不好的礼节。 在我的.ready()函数中,我有: 我的锚点看起来像这样: 但是当单击链接时,将按需执行ajax功能,但是浏览器滚动到页面顶部。不好。 我尝试添加: 在调用执行ajax的函数之前,但这无济