圆月山庄资源网 Design By www.vgjia.com
1.wxml代码:
<view class="page"> <import src="/UploadFiles/2021-04-02/catering-item.wxml">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时,则更换左侧种类菜单到指定位置。
总结
圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]