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

编程语言 2023-12-17 09:07:18 阅读次数: 0

话不多说上效果

<!-- 在页面没有计算出每个小版块的节点高度之前不显示 -->
<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>

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

/* 公共样式 */
/* 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;
}

猜你喜欢

转载自blog.csdn.net/YN2000609/article/details/134212941
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022