话不多说上效果
源码在此。之前连接已作废
2022-06-14更新优化版:(使用scroll-into-view版本制作,作废)
2022-06-21更新优化版:(使用scroll-top版本制作)
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
formDatas: {
scroll_top_left: 0,
scroll_top_right: 0
},
status_idx: 0,
bankuai_height: {},
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
var that = this;
var windowHeight = wx.getSystemInfoSync().windowHeight;
//获取当前屏幕高度减去头部高度
var header = wx.createSelectorQuery();
header.select('#header').boundingClientRect();
header.exec(function (res) {
var headerHeight = res[0].height;
var productMainHeight = windowHeight - headerHeight;
that.setData({
productMainHeight,
headerHeight
})
})
//延迟加载框架,防止获取节点错误
setTimeout(function () {
// 循环每个板块的内容高度
//10表示当前板块长度
var query = wx.createSelectorQuery();
for (var i = 0; i < 10; i++) {
query.select('#NAC' + i).boundingClientRect();
}
//初始化参数
var bankuai_height = that.data.bankuai_height;
//监听滚动所使用数据
bankuai_height.h = [];
bankuai_height.idx = [];
//用于点击事件使用数据
bankuai_height.hup = [];
bankuai_height.idxup = [];
query.exec((res) => {
for (var i = 0; i < res.length; i++) {
bankuai_height.h[i] = res[i].top - that.data.headerHeight;
bankuai_height.idx[i] = i;
bankuai_height.hup[i] = res[i].top - that.data.headerHeight;
}
bankuai_height.h = bankuai_height.h.reverse();
bankuai_height.idx = bankuai_height.idx.reverse();
that.setData({
bankuai_height: bankuai_height,
ready: false,
})
});
}, 300)
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
var that = this;
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
//类别
on_k_v: function (event) {
var that = this;
var idx = event.currentTarget.dataset.idx;
var bankuai_height = that.data.bankuai_height;
that.setData({
"formDatas.scroll_top_left": bankuai_height.hup[idx],
})
},
//监听滚动
enTop(e) {
var that = this;
var top_tome = e.detail.scrollTop;
var bankuai_height = that.data.bankuai_height;
//如果数据太大,可以把下面的注释打开,这样就不是每次滑动都执行
// if (that.setInter) {
// clearInterval(that.setInter);
// }
// that.setInter = setInterval(
// function () {
for (var i = 0; i < bankuai_height.h.length; i++) {
if (top_tome >= bankuai_height.h[i] - 15) {
//判断当前所滑动的正比
//10表示当前板块长度
var right_idx = 10 - i;
var scroll_top_right = 0;
//永远停留在列表四板块
if (right_idx > 4) {
scroll_top_right = (right_idx - 4) * 75;
}
that.setData({
status_idx: bankuai_height.idx[i],
"formDatas.scroll_top_right": scroll_top_right
})
break;
}
}
// clearInterval(that.setInter);
// }, 200);
}
})
<!-- 在页面没有计算出每个小版块的节点高度之前不显示 -->
<view class="head_box flex center" id="header">
这里是头部
</view>
<view class="prduct_box flex" style="height: {{productMainHeight}}px;">
<scroll-view class="right" scroll-y="{{true}}" scroll-with-animation="{{true}}" enhanced scroll-top="{{formDatas.scroll_top_right}}" style="height: {{productMainHeight}}px;">
<view class="flex itme center {{status_idx=='0'?'cur':''}}" catchtap="on_k_v" data-idx="0">列表一</view>
<view class=" flex itme center {{status_idx=='1'?'cur':''}}" catchtap="on_k_v" data-idx="1">列表二</view>
<view class="flex itme center {{status_idx=='2'?'cur':''}}" catchtap="on_k_v" data-idx="2">列表三</view>
<view class="flex itme center {{status_idx=='3'?'cur':''}}" catchtap="on_k_v" data-idx="3">列表四</view>
<view class="flex itme center {{status_idx=='4'?'cur':''}}" catchtap="on_k_v" data-idx="4">列表五</view>
<view class="flex itme center {{status_idx=='5'?'cur':''}}" catchtap="on_k_v" data-idx="5">列表六</view>
<view class="flex itme center {{status_idx=='6'?'cur':''}}" catchtap="on_k_v" data-idx="6">列表七</view>
<view class="flex itme center {{status_idx=='7'?'cur':''}}" catchtap="on_k_v" data-idx="7">列表八</view>
<view class="flex itme center {{status_idx=='8'?'cur':''}}" catchtap="on_k_v" data-idx="8">列表九</view>
<view class="flex itme center {{status_idx=='9'?'cur':''}}" catchtap="on_k_v" data-idx="9">列表十</view>
<!-- 最后一个一定要加,让最后一个列表显示在剧中位置 -->
<view style="min-height: {{productMainHeight/3}}px;"></view>
</scroll-view>
<scroll-view class="left flex flex1" scroll-y="{{true}}" scroll-with-animation="{{true}}" enhanced scroll-top="{{formDatas.scroll_top_left}}" bindscroll="enTop">
<view class="itme flex column" id="NAC0">
<view class="title flex acenter">列表一</view>
<view class="list">
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
</view>
</view>
<view class="itme flex column" id="NAC1">
<view class="title flex acenter">列表二</view>
<view class="list">
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
</view>
</view>
<view class="itme flex column" id="NAC2">
<view class="title flex acenter">列表三</view>
<view class="list">
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
</view>
</view>
<view class="itme flex column" id="NAC3">
<view class="title flex acenter">列表四</view>
<view class="list">
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
</view>
<view class="list">
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
</view>
<view class="list">
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
</view>
<view class="list">
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
</view>
<view class="list">
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
</view>
<view class="list">
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
</view>
</view>
<view class="itme flex column" id="NAC4">
<view class="title flex acenter">列表五</view>
<view class="list">
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
</view>
</view>
<view class="itme flex column" id="NAC5">
<view class="title flex acenter">列表六</view>
<view class="list">
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
</view>
</view>
<view class="itme flex column" id="NAC6">
<view class="title flex acenter">列表七</view>
<view class="list">
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
</view>
</view>
<view class="itme flex column" id="NAC7">
<view class="title flex acenter">列表八</view>
<view class="list">
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
</view>
</view>
<view class="itme flex column" id="NAC8">
<view class="title flex acenter">列表九</view>
<view class="list">
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
</view>
</view>
<!-- 为了让最后一个板块的商品在不多的情况下,显示在最顶部。默认最后一个板块最小高度为一屏高度 -->
<view class="itme flex column" id="NAC9" style="min-height: {{productMainHeight}}px;">
<view class="title flex acenter">列表十</view>
<view class="list">
<view class="li flex">
<image class="img" lazy-load="{{true}}" src="/pages/images/xinxi/ico_xinxi_friend.png"></image>
<view class="flex flex1 column jcb count">
<text class="t ellipsis2">啊实打实</text>
<text class="j">¥120.00</text>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
/* 公共样式 */
/* flex 样式*/
.flex {
display: flex !important;
}
.flex.column {
flex-direction: column;
}
.flex.acenter {
align-items: center;
}
.flex.jcenter {
justify-content: center;
}
.flex.jcb {
justify-content: space-between;
}
.flex.jcad {
justify-content: space-around;
}
.flex.center {
align-items: center;
justify-content: center;
}
.flex.centerend {
justify-content: flex-end;
}
.flex.accolumn {
align-items: flex-end;
}
.flex.flex1,
.flex .flex1 {
flex: 1;
}
.flex.wrap {
flex-wrap: wrap;
}
/* 省略号 */
.ellipsis {
overflow: hidden;
word-break: keep-all;
white-space: nowrap;
text-overflow: ellipsis;
}
.ellipsis1 {
display: block;
white-space: pre-line;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
flex-flow: row wrap;
}
.ellipsis2 {
display: block;
white-space: pre-line;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
flex-flow: row wrap;
}
.head_box {
height: 200rpx;
background-color: #000;
color: #fff;
}
.prduct_box .right {
width: 200rpx;
flex-shrink: 0;
height: 100%;
background-color: #f00;
}
.prduct_box .right .itme {
height: 150rpx;
color: #fff;
}
.prduct_box .right .itme.cur {
background-color: #000;
}
.prduct_box .left {
margin: 0 20rpx;
height: 100%;
}
.prduct_box .left .title {
color: #000;
font-size: 28rpx;
height: 80rpx;
}
.prduct_box .left .list .li {
margin-bottom: 20rpx;
}
.prduct_box .left .list .li .img {
width: 200rpx;
height: 200rpx;
margin-right: 20rpx;
}
.prduct_box .left .list .li .count {
padding: 15rpx 0;
}
.prduct_box .left .list .li .count .t {
font-size: 30rpx;
font-weight: bold;
color: #000;
}
.prduct_box .left .list .li .count .j {
font-size: 30rpx;
font-weight: bold;
color: #f00;
}
2023-03-08更新优化版:(推荐使用,小程序官方vtabs组件)