// ps:先上代码 后面有时间再补备注
效果图
wxml
{{item}}
{{item.text}}
{{itemData.title}}
¥{{itemData.newPrice}}
¥{{itemData.oldPrice}}
wxss
.container {}.main { height: calc(100vh); width: 100%; box-sizing: border-box; position: relative; overflow: hidden; display: flex;}.left_sroll { width: 160rpx; height: 100%; background-color: #f5f5f5;}.left_sroll view { text-align: center; height: 100rpx; line-height: 100rpx; position: relative;}.left_sroll .alive { background: #fff;}.left_sroll .alive::before { content: ""; display: block; height: 30rpx; width: 4rpx; background: #ff7500; margin-top: 35rpx; position: absolute;}.right { width: calc(100% - 160rpx); display: flex; flex-direction: column;}.top_sroll { position: relative; height: 100rpx; line-height: 100rpx; overflow: auto; display: flex; flex-direction: row; overflow-y: scroll; white-space: nowrap; width: calc(100% - 160rpx);}.top_sroll view { height: 100rpx; line-height: 100rpx; display: inline-block; padding: 0 30rpx;}.top_sroll .alive{ color: #FF9B00; border:1px solid #FF9B00; border-radius: 30rpx; padding: 5rpx 20rpx;}.bottom_sroll { height: calc(100% - 100rpx); width: 100%; position: relative;}.bottom_sroll .unit { line-height: 100rpx; display: flex; align-items: center; margin-bottom: 24rpx;}.bottom_sroll .unit .productImg { width: 180rpx; height: 180rpx;}.bottom_sroll .unit .car-icon { width: 64rpx; height: 64rpx;}.bottom_sroll .unit .details { padding: 10rpx 20rpx; width: calc(100% - 200rpx); height: 100%;}.bottom_sroll .unit .details_content { display: flex; justify-content: space-between; align-items: center; width: 100%;}.bottom_sroll .unit .details_content .price { display: flex; flex-direction: column; padding: 0; margin: 0;}.bottom_sroll .unit .details_content .price .newPrice { color: #ff7500; height: 35rpx; line-height: 35rpx;}.bottom_sroll .unit .details_content .price .oldPrice { color: #c0c0c0; text-decoration: line-through; font-size: 28rpx; height: 35rpx; line-height: 35rpx;}
js
({data: { left_srcoll_index: 0, left_sroll_arr: ['热卖', '蔬菜', '蛋肉', '水产', '零食', '轻食', '热卖', '蔬菜', '蛋肉', '水产', '零食', '轻食'], top_srcoll_index: 0, top_sroll_arr: [{ id: "01", text: '新人大礼包' }, { id: "02", text: '限时特价' }, { id: "03", text: '时令鲜果' } ], content_srcoll: [{ title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99", intoView: "test1" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99", intoView: "test2" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99", intoView: "test3" } ], right_scroll_content: [{ id: "01", title: "新人大礼包", data: [{ title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" } ] }, { id: "02", title: "限时特价", data: [{ title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" } ] }, { id: "03", title: "时令鲜果", data: [{ title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" } ] } ] }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function() { }, /** * 生命周期函数--监听页面显示 */ onShow: function() { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function() { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function() { }, /** * 用户点击右上角分享 */ onShareAppMessage: function() { }, changeLeft_sroll(e) { var index = e.currentTarget.dataset.index; this.setData({ left_srcoll_index: index }) }, changeTop_sroll(e) { var index = e.currentTarget.dataset.index; var t_id = e.currentTarget.dataset.id; this.setData({ top_srcoll_index: index, rigId: t_id, }) }, scroll(e) { var that = this; var classfiySelect = ""; var scrollTop = e.detail.scrollTop; // console.log('scrollTop', scrollTop) var h = 0; var _h = that.length('01'); that.data.right_scroll_content.forEach(function(clssfiy, i) { var _h = that.length(clssfiy['id']) * (94 + 12); if (scrollTop >= h) { classfiySelect = clssfiy['id']; } h += _h; // console.log('h', h); }) classfiySelect = parseInt(classfiySelect) - 1; that.setData({ top_srcoll_index: classfiySelect, }) }, //求每一栏长度 length: function(e) { var that = this; var rightData = that.data.right_scroll_content; for (var i = 0; i < rightData.length; i++) { if (rightData[i]['id'] == e) { return rightData[i]['data'].length; } } },})