微信小程序scroll-view 实现锚点定位，滑动标题变化，点击标题变化

话不多说上效果

源码在此。之前连接已作废

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;
}

微信小程序scroll-view 实现锚点定位，滑动标题变化，点击标题变化相关推荐

微信小程序基于scroll-view实现锚点定位
代码地址如下: http://www.demodashi.com/demo/14009.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序学习——view的显示与隐藏
微信小程序学习--view的显示与隐藏需要在全局数据块中,设定一个控制键. data: {......//省略其他代码showView: true}, 然后是在wxml中,view的class中设置 ...
uniapp开发微信小程序-4.页面跳转与横向滑动
uniapp开发微信小程序-4.页面跳转与横向滑动本篇文章主要是想记录一下横向滑动功能,备忘的同时给大家做个分享. 但既然是初级分享系列文章,为了方便新手朋友的上手工作,还是在此之前说一下页面跳转的 ...
微信小程序/网页/app/android等各种bar图标导航图标文章图标标题图标下拉/检索收藏上传客服等图标整理
在做微信小程序的时候,需要给底部放置图标.但是找了好久都没有找到自己想要的,适合的.后来我就把所有的小程序的图标都看了下.后来想想还是整理出来,方便自己以后用,也方便大家一下.我敢保证有你想要的,适合 ...
如何去掉微信小程序导航栏，以及禁止页面滑动
如何去掉微信小程序导航栏,以及禁止页面滑动 1.微信小程序要去掉微信自带的导航栏,只需要在app.json中加上 "navigationStyle": "custom&q ...
微信小程序中view水平垂直居中
微信小程序布局中view有时候需要在水平方向和垂直方向上都居中,发现flex布局可以实现,例如view1(图中灰色方块)需要实现居中,可以用如下设置实现: wxss文件中的设置如下: .main {w ...
微信小程序把view居中_初识微信小程序
"晓程序" 小程序连载笔记,通俗易懂,欢迎各位转发关注学习.未经作者授权,禁止转载初识小程序什么是微信小程序微信小程序,小程序的一种,英文名Wechat Mini Progr ...
微信小程序解决view点击事件穿透地图map触发markertap
微信小程序中使用map组件,ios手机中点击地图上的view,会触发底下的markertap,只要底下如果有marker点的话. 这就造成了用户体验不是很好. 然后无意间我发现点击能滑动的scroll ...
微信小程序scroll事件/onPageScroll事件的延迟问题
需求在前端开发中,我们经常会遇到一个需求,在页面进行滚动操作的时候,当页面其中的某个元素滚动到某个位置,我们就让该元素停留在该位置.等到滚动小于某个值的时候,再让该元素继续随着页面滚动.这就是我们平 ...
微信小程序－view的创建和使用
今天写第一篇关于微信小程序的学习,view的创建和使用. 微信小程序开发需要学习基本的标签,这对我来说是一个挑战,不过加油啊. 1.创建一个View 在wxml中 <view class=& ...

微信小程序scroll-view 实现锚点定位，滑动标题变化，点击标题变化

微信小程序scroll-view 实现锚点定位，滑动标题变化，点击标题变化相关推荐

最新文章

热门文章