1

miniprogram/pages/index/index.ts

@@ -2,7 +2,18 @@
 
 import { api_shopProduct } from "../../api/login";
 import { debounce } from '../../utils/util'
-
+// 定义节流函数
+// function throttle(func: any, delay: any) {
+//   let timer: any = null;
+//   return function () {
+//     if (!timer) {
+//       func.apply(this, arguments);
+//       timer = setTimeout(() => {
+//         timer = null;
+//       }, delay);
+//     }
+//   }
+// }
 // 获取应用实例
 const app = getApp<IAppOption>()
 // pages/orders/orders.ts
@@ -45,6 +56,7 @@ Page({
     isScrollTT: false,
     scrollIntoViewType: false,
     headerHeight: 0, // 头部的高度
+    initialScrollHeight: 0, // 滚动高度
   },
 
   /**
@@ -60,6 +72,12 @@ Page({
         headerHeight: rect.height
       })
     }).exec();
+    wx.createSelectorQuery().select('#scroll-view').boundingClientRect(function (rect) {
+      // console.log(rect, 'rect')
+      that.setData({
+        initialScrollHeight: rect.height
+      })
+    }).exec();
   },
   /**
    * 获取基础信息
@@ -237,44 +255,56 @@ Page({
   // 页面滚动时颜色变化
   onScrollView(e: { detail: any }) {
     const top = e.detail.scrollTop || 0 
+    const scrollHeight =  e.detail.scrollHeight || 0
     // 从100开始显示
+    // console.log(top, scrollHeight, this.data.initialScrollHeight, '121121221')
+    
     this.setData({
       // opacity: top < 100 ? 0 : (top - 100) > 150 ? 1 : (top - 100) / 150
       opacity: top < 100 ? 0 : (top - 100) > 150 ? 1 : 1
     })
-    if(this.data.scrollIntoViewType) {
+    if (top + this.data.initialScrollHeight >= scrollHeight - 80) {
+      // console.log('已经滑动到底部了');
+      // 相应业务逻辑处理
       this.setData({
-        scrollTop: this.data.scrollDiscount ? top - this.data.headerHeight : top,
-        scrollIntoViewType: false,
-        scrollDiscount: false,
-        isScrollTT: true,
+        scrolIntoViewStr: 'type2'
       })
     } else {
-      if(!this.data.isScrollTT) {
-        this.onChangeScroll()
-      } else {
+      if(this.data.scrollIntoViewType) {
         this.setData({
-          isScrollTT: false,
+          scrollTop: this.data.scrollDiscount ? top - this.data.headerHeight : top,
+          scrollIntoViewType: false,
+          scrollDiscount: false,
+          isScrollTT: true,
         })
+      } else {
+        if(!this.data.isScrollTT) {
+          this.onChangeScroll()
+        } else {
+          this.setData({
+            isScrollTT: false,
+          })
+        }
       }
     }
+    
   },
   onChangeScroll() {
     const that = this;
     debounce(function() {
-      wx.createSelectorQuery().select('#type3').boundingClientRect(function (rect) {
-        if(rect.top > 0 &&  rect.top <= that.data.headerHeight) {
-         that.setData({
-           scrolIntoViewStr: 'type3',
-         })
-        }
-      }).exec();
       wx.createSelectorQuery().select('#type2').boundingClientRect(function (rect) {
         if(rect.top > 0 &&  rect.top <= that.data.headerHeight) {
           that.setData({
             scrolIntoViewStr: 'type2'
           })
         }
+      }).exec();
+      wx.createSelectorQuery().select('#type3').boundingClientRect(function (rect) {
+        if(rect.top > 0 &&  rect.top <= that.data.headerHeight) {
+         that.setData({
+           scrolIntoViewStr: 'type3',
+         })
+        }
         if(rect.top > 0 && rect.top > that.data.headerHeight) {
           that.setData({
             scrolIntoViewStr: 'type1'
@@ -288,7 +318,7 @@ Page({
     this.setData({
       scrolIntoView: type,
       scrolIntoViewStr: type,
-      scrollDiscount: type !== 'type3' ? true : false,
+      scrollDiscount: type !== 'type2' ? true : false,
       scrollIntoViewType: true,
     })
   },

miniprogram/pages/index/index.wxml

@@ -71,8 +71,8 @@
       <navigation-bar back="{{false}}" title="商品详情"></navigation-bar>
       <view class="product-catagory">
         <view class="item {{ scrolIntoViewStr == 'type1' || !scrolIntoViewStr ? 'selected' : '' }}" bind:tap="onTapAnchor" data-type="type1">产品介绍</view>
-        <view class="item {{ scrolIntoViewStr == 'type2' ? 'selected' : '' }}" bind:tap="onTapAnchor" data-type="type2">互通案例</view>
         <view class="item {{ scrolIntoViewStr == 'type3' ? 'selected' : '' }}" bind:tap="onTapAnchor" data-type="type3">购买流程</view>
+        <view class="item {{ scrolIntoViewStr == 'type2' ? 'selected' : '' }}" bind:tap="onTapAnchor" data-type="type2">互通案例</view>
       </view>
     </view>
 
@@ -92,8 +92,9 @@
           <image id="type1" mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/1732175006625.png" data-src="https://oss.dayaedu.com/ktyq/1732175006625.png"></image>
           <image mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/1732175021350.png" data-src="https://oss.dayaedu.com/ktyq/1732175021350.png"></image>
           <image mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/1732175031878.png" data-src="https://oss.dayaedu.com/ktyq/1732175031878.png"></image>
-          <image id="type2" mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/1732175041724.png" data-src="https://oss.dayaedu.com/ktyq/1732175041724.png"></image>
-          <image id="type3" mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/1732507279822.png" data-src="https://oss.dayaedu.com/ktyq/1732507279822.png"></image>
+          <image id="type3" mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/1732617269723.png" data-src="https://oss.dayaedu.com/ktyq/1732617269723.png"></image>
+          <image id="type2" mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/1732617388991.png" data-src="https://oss.dayaedu.com/ktyq/1732617388991.png"></image>
+          
           <!-- <block wx:for="{{ goodsImgList }}" wx:key="index">
             <image id="{{ 'type1' + (index + 1) }}" mode="widthFix" bind:tap="onPreivewGoodsImg" data-src="{{item}}" src="{{ item }}"></image>
           </block> -->