首页 >> js开发 >> js微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)js大全
js微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
1.wxml代码：
style='height: {{winHeight}}px'>
{{item.title}}
{{item.title}}
style='height: {{winHeight}}px'>
{{item.title}}
{{item.title}}
@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; */
}
@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
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
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
});
}
});
},
})
// 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
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
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时，则更换左侧种类菜单到指定位置。总结总结总结
@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; */
}
@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
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
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
});
}
});
},
})
// 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
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
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时，则更换左侧种类菜单到指定位置。总结总结总结
相关文章:
- jsVUE项目axios请求头更改Content-Type操作js大全
- jsVue中的this.$options.data()和this.$data用法说明js大全
- jsElement Breadcrumb 面包屑的使用方法js大全
- js解决vue动态路由异步加载import组件,加载不到module的问题js大全
- jsAngular利用HTTP POST下载流文件的步骤记录js大全
- js解决vuex数据页面刷新后初始化操作js大全
- jsvue 页面回退mounted函数不执行的解决方案js大全
- jsvue项目使用$router.go(-1)返回时刷新原来的界面操作js大全
- jsElement Input输入框的使用方法js大全
- js关于angular浏览器兼容性问题的解决方案js大全
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
