视图层-Search-pdd项目实现搜索页面左右联动滚动

最新推荐文章于 2024-01-13 11:51:09 发布
最新推荐文章于 2024-01-13 11:51:09 发布
阅读量166 收藏
点赞数 1
分类专栏： pdd移动端仿制
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43632167/article/details/109699093
版权

左右联动滚动

项目源码地址

https://github.com/zhou-X-boy/Vue_study/tree/master/VueProject/pdd

定义数据

在Shop.vue组件中定义数据

1：右侧列表滑动的Y轴坐标

2：右侧所有分类的头部位置

<template>
//见源码
</template>
<script>
//1：引入vuex中从服务器端发送过来的数据，也就是state.js中的数据
import { mapState} from 'vuex';
//引入第三方插件库实现滚动效果
import BScroll from 'better-scroll'
    
 export default {
     name: 'Shop',
     data() {
         return {
             scrollY: 0,  //右侧列表滑动的Y轴坐标
             rightLiTops: []  //右侧所有分类的头部位置
         }
     }
 }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
//css样式见源码
</style>

求出右侧所有版块的头部位置

1：创建一个方法计算右侧所有版块的头部位置，

2：并在watch中进行监听这个方法，当数据发生变化时才开始执行这个方法，

<template>
	<div class="shop">
        <!--左边-->
        <div class="menu-wrapper">
    	</div>
        <!--右边-->
    	<div class="shop-wrapper">
            <ul ref="shopsParent" >
                <li class="shops-li" v-for="(goods, index1) in searchgoods" :key="index1" >
                  <div class="shops-title">
                    <h4>{{goods.name}}</h4>
                    <a href="">查看更多 ></a>
                  </div>
                  <ul class="phone-type" v-if="goods.tag === 'phone'">
                    <li v-for="(phone,index3) in goods.category" :key="index3" >
                      <img :src="phone.icon" alt="">
                    </li>
                  </ul>
                  <ul class="shops-items">
                    <li v-for="(item, index2) in goods.items" :key="index2">
                      <img :src="item.icon" alt="">
                      <span>{{item.title}}</span>
                    </li>
                  </ul>
                </li>
    	    </ul>
   		</div>
    </div>
</template>
<script>
//1：引入vuex中从服务器端发送过来的数据，也就是state.js中的数据
import { mapState} from 'vuex';
//引入第三方插件库实现滚动效果
import BScroll from 'better-scroll'
    
export default {
 name: 'Shop',
 data() {
   return {
       scrollY: 0,  //右侧列表滑动的Y轴坐标(实时更新)
       rightLiTops: []  //右侧所有分类的头部位置
   }
 },
 methods: {
     //1.2：求出右侧所有版块的头部位置
     _initRightLiTops() {
         //1.2.1：创建临时数组
          const tempArr = [];
          //1.2.2：定义一个新的变量记录高度
          let top = 0;
          //1.2.3：将定义的变量加入到临时数组中
          tempArr.push(top);
          //1.2.4：遍历右侧商品列表class为shops-li的li标签，成为一个类数组
          let allLis = this.$refs.shopsParent.getElementsByClassName('shops-li');
          /*1.2.5：转化为一个真数组，Array.prototype（数组原型） slice.call()方法将类数组转化为真正的数组
           通过forEach()方法遍历这个数组
           */
          Array.prototype.slice.call(allLis).forEach(li => {
            //1.2.6：通过li.clientHeight()方法取得li的高度，并叠加计算每个li的高度
            top += li.clientHeight;
            //1.2.7：将取得的每个li得高度加入到tempArr数组中
            tempArr.push(top);
          });
          //1.2.8：更新数据，将tempArr数组赋值给创建的空数组rightLiTops
          this.rightLiTops = tempArr;
     }
	},
 //监听方法，当数据发生变化时，才被执行
 watch: {
     //监听searchgoods数据变化
     searchgoods() {
       //$nextTick()方法 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它
       this.$nextTick(()=>{
         //监听右侧所有版块的的头部位置
         this._initRightLiTops();
       })
     }
 }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "../../../common/stylus/mixins.styl"
//css样式见源码
</style>

求出右侧列表滑动的Y轴坐标(实时更新)

利用better-scroll第三方库中带有的on方法监听滚动事件

<script>
//1：引入vuex中从服务器端发送过来的数据，也就是state.js中的数据
import { mapState} from 'vuex';
//引入第三方插件库实现滚动效果
import BScroll from 'better-scroll'
    
export default {
    name: 'Shop',
    data() {
       return {
           scrollY: 0,  //右侧列表滑动的Y轴坐标(实时更新)
           rightLiTops: []  //右侧所有分类的头部位置
       }
 	},
    methods: {
        //1.1：初始化方法
        _initBScroll() {
          //1.1：左边
          let leftScroll = new BScroll('.menu-wrapper', {
            scrollY: true,  //当设置为 true 的时候，可以开启纵向滚动。
            click: true
          });
          //1.2：左边
            //let rightScroll 改为 this.rightScroll 就讲局部的对象变为全局的对象
          let rightScroll = new BScroll('.shop-wrapper', {
            scrollY: true,  //当设置为 true 的时候，可以开启纵向滚动。
            click: true
          });
          //1.3：右侧滑动事件，通过better-scroll库中带有的on方法
          this.rightScroll.on('scroll',()=>{
              
          })
        }
    },
    width: {
        //监听searchgoods数据变化
        searchgoods() {
          //$nextTick()方法 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它
          this.$nextTick(()=>{
            //1.1：监听初始化方法
            this._initBScroll();
            //1.2：监听右侧所有版块的的头部位置
            this._initRightLiTops();
          })
        }
    }
}
</script>

显示右侧滚动CSS样式变化

current类：当滚动联动时，左侧被选中的选项的样式变化

<style scoped lang="stylus" rel="stylesheet/stylus">
@import "../../../common/stylus/mixins.styl"
 //其他css样式见源码
.current
  	color #e02e24
  	.current::before   //:before 在元素之前插入内容
      content '' //插入的内容
      background-color #e02e24
      width 4px
      height 30px
      position absolute  //绝对定位
      left 0
</style>

动态绑定类

使class为shops-li的li标签动态绑定current类，当当前li标签的index===currentIndex计算属性获得的当前滚动到的index时，显示current类的样式

<template>
	<div class="shop">
        <!--左边-->
        <div class="menu-wrapper">
            <ul>
                <li class="menu-item" 
                    v-for="(goods, index) in searchgoods" 
                    :key="index" 
                    :class="{current: index === currentIndex}"
                >
                  
                </li>
    	    </ul>
    	</div>
        <!--右边-->
    	<div class="shop-wrapper">
            
   		</div>
    </div>
</template>
<script>
//1：引入vuex中从服务器端发送过来的数据，也就是state.js中的数据
import { mapState} from 'vuex';
//引入第三方插件库实现滚动效果
import BScroll from 'better-scroll'
    
export default {
 name: 'Shop',
 data() {
   return {
       scrollY: 0,  //右侧列表滑动的Y轴坐标(实时更新)
       rightLiTops: []  //右侧所有分类的头部位置
   }
 },
 methods: {
    //1.1：初始化方法
    _initBScroll() {
      //1.2：左边
      //let rightScroll 改为 this.rightScroll 就讲局部的对象变为全局的对象
      this.rightScroll = new BScroll('.shop-wrapper', {
        scrollY: true,  //当设置为 true 的时候，可以开启纵向滚动。
        click: true,
        /*
        * 有时候我们需要知道滚动的位置。
        * 当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发scroll 事件；
        * 当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；
        * 当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。
        * 如果没有设置该值，其默认值为 0，即不派发 scroll 事件。
        */
        probeType: 3
      });
 },
 //监听方法，当数据发生变化时，才被执行
 watch: {
     
 },
 //计算属性
 computed: {
     //用于动态决定左侧哪个选项被选中
    currentIndex() {
      //1：获取数据
      const {scrollY,rightLiTops} = this;
      //2：遍历rightLiTops数组，取出索引
      /*
      *findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
      *当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，
      * 如果没有符合条件的元素返回 -1
      */
      return rightLiTops.findIndex((LiTop,index)=> {
        return scrollY >= LiTop && scrollY <= rightLiTops[index + 1]
      })
    }
 }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "../../../common/stylus/mixins.styl"
//css样式见源码
.current
  	color #e02e24
  	.current::before   //:before 在元素之前插入内容
      content '' //插入的内容
      background-color #e02e24
      width 4px
      height 30px
      position absolute  //绝对定位
      left 0
</style>

实现点击左侧商品列表，右侧商品列表滚动

使用第三方库better-scroll带有的**scrollTo(x, y, time, easing, extraTransform)**方法来实现效果

  • {number} x 横轴坐标（单位 px）
  • {number} y 纵轴坐标（单位 px）
  • {number} time 滚动动画执行的时长（单位 ms）
  • {Object} easing 缓动函数，一般不建议修改，如果想修改，参考源码中的 packages/shared-utils/src/ease.ts 里的写法

监听左侧商品列表的点击事件

<template>
	<div class="shop">
        <!--左边-->
        <div class="menu-wrapper">
            <ul>
                <li class="menu-item" 
                    v-for="(goods, index) in searchgoods" 
                    :key="index" 
                    :class="{current: index === currentIndex}"
                     @click = "clickLeftItem(index)"
                >
                  
                </li>
    	    </ul>
    	</div>
        <!--右边-->
    	<div class="shop-wrapper">
   		</div>
    </div>
</template>
<script>
//1：引入vuex中从服务器端发送过来的数据，也就是state.js中的数据
import { mapState} from 'vuex';
//引入第三方插件库实现滚动效果
import BScroll from 'better-scroll'
    
export default {
 name: 'Shop',
 data() {
       return {
           scrollY: 0,  //右侧列表滑动的Y轴坐标(实时更新)
           rightLiTops: []  //右侧所有分类的头部位置
       }
 },
 methods: {
    //1.1：初始化方法
    _initBScroll() {
      //1.1：左边
      let leftScroll = new BScroll('.menu-wrapper', {
        scrollY: true,  //当设置为 true 的时候，可以开启纵向滚动。
        click: true
      });
      //1.2：右边
      //let rightScroll 改为 this.rightScroll 就讲局部的对象变为全局的对象
      this.rightScroll = new BScroll('.shop-wrapper', {
        scrollY: true,  //当设置为 true 的时候，可以开启纵向滚动。
        click: true,
        /*
        * 有时候我们需要知道滚动的位置。
        * 当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发scroll 事件；
        * 当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；
        * 当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。
        * 如果没有设置该值，其默认值为 0，即不派发 scroll 事件。
        */
        probeType: 3
      });
      //1.3：右侧滑动事件，通过better-scroll库中带有的on(type, fn, context)方法
      this.rightScroll.on('scroll', (pos)=>{
        //通过Math.abs(int a)方法取得Y轴 ,返回int 值的绝对值。如果参数为非负数，则返回该参数。如果参数为负数，则返回该参数的相反数。
        this.scrollY = Math.abs(pos.y);
        // console.log(this.scrollY)
      });
      this.rightScroll.on('scrollEnd', (pos)=>{
        this.scrollY = Math.abs(pos.y);
      })
    },
 },
 //监听方法，当数据发生变化时，才被执行
 watch: {
     
 },
 //计算属性
 computed: {
    //用于动态决定左侧哪个选项被选中
    currentIndex() {
      //1：获取数据
      const {scrollY,rightLiTops} = this;
      //2：遍历rightLiTops数组，取出索引
      /*
      *findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
      *当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，
      * 如果没有符合条件的元素返回 -1
      */
      return rightLiTops.findIndex((liTop,index)=> {
        return scrollY >= liTop && scrollY < rightLiTops[index + 1]
      })
    }
 }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "../../../common/stylus/mixins.styl"
//css样式见源码
</style>

实现滚动右侧商品列表，左侧商品列表滚动

使用第三方库better-scroll带有的**scrollToElement(el, time, offsetX, offsetY, easing)**方法来实现效果

  • {DOM | string} el 滚动到的目标元素, 如果是字符串，则内部会尝试调用 querySelector 转换成 DOM 对象。

  • {number} time 滚动动画执行的时长（单位 ms）

  • {number | boolean} offsetX 相对于目标元素的横轴偏移量，如果设置为 true，则滚到目标元素的中心位置

  • {number | boolean} offsetY 相对于目标元素的纵轴偏移量，如果设置为 true，则滚到目标元素的中心位置

  • {Object} easing 缓动函数，一般不建议修改，如果想修改，参考源码中的 packages/shared-utils/src/ease.ts 里的写法

    <template>
  <div class="shop">
    <!--左边-->
    <div class="menu-wrapper">
      <ul>
        <li class = "menu-item"
            v-for = "(goods, index) in searchgoods"
            :key = "index"
            :class = "{current: index === currentIndex}"
            @click = "clickLeftItem(index)"
            ref = "menulist"
        >
          <span>{{goods.name}}</span>
        </li>
      </ul>
    </div>
    <!--右边-->
    <div class="shop-wrapper">
      <ul ref="shopsParent" >
        
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Shop",
  data() {
    return {
      scrollY: 0,  //右侧列表滑动的Y轴坐标（实时更新）
      rightLiTops: []  //所有分类的头部位置
    }
  },
  //生命周期函数，组件创建后调用
  mounted() {},
  methods: {
    //1.4：滚动右侧商品列表切换左侧商品列表
    _leftScroll(index){
      //取得左侧li标签
      let menuLists = this.$refs.menulist;
      //取得滚动右侧联动左侧当前索引所在的li标签
      let el = menuLists[index];
      //console.log(el);
      this.leftScroll.scrollToElement(el,300,0,-100);
    }
  },
  //计算属性
  computed: {
    //3：获取搜索列表数据
    ...mapState(['searchgoods']),
    //用于动态决定左侧哪个选项被选中
    currentIndex() {
      //1：获取数据
      const {scrollY,rightLiTops} = this;
      //2：遍历rightLiTops数组，取出索引
      /*
      *findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
      *当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，
      * 如果没有符合条件的元素返回 -1
      */
      return rightLiTops.findIndex((liTop,index)=> {
        //绑定左侧索引位置滚动
        this._leftScroll(index);
        return scrollY >= liTop && scrollY < rightLiTops[index + 1]
      })
    }
  },
  //监听方法，数据发生变化，才开始执行
  watch: {},
}
</script>
zhou-boy
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
最新PDD商家端Anti-Content参数逆向分析与纯算法还原
吴秋霖的博客
04-05 2449
最新通用版本Anti-Content加密参数分析，Webpack纯算法扣取与算法还原！
pdd商家后台API anti-content 加密参数
12-27
可用于pdd 商家后台 调取API接口的加密参数 补过环境 直接调用 get_anti_content()
视图层-Search-pdd项目实现搜索页面商品列表上下滚动
qq_43632167的博客
11-15 194
上下滚动 项目源码地址 https://github.com/zhou-X-boy/Vue_study/tree/master/VueProject/pdd 使用第三方插件库better-scroll BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。 BetterScroll 是使用纯 JavaScr
前端下拉左右选择，带搜索框
weixin_34228617的博客
10-25 518
2019独角兽企业重金招聘Python工程师标准>>> ...
视图层-Search-pdd项目实现在搜索页面点击取消返回商品列表
qq_43632167的博客
11-15 190
实现在搜索面板点击取消按钮返回商品列表 定义数据 在搜索主面板Search.vue中定义一个数据设置搜索面板显示隐藏，并通过指令v-if给搜索面板 <template> <div class="search"> <!--搜索框--> <search-nav/> <!--商品分类--> <shop/> <!--点击搜索框跳转的面板--> <search-panel v
Mattias & Lasse：PDD-net in MICCAI
过招
03-26 760
简介 PDD-net 是德国吕贝克大学的 Mattias P. Heinrich 和 Lasse Hansen 在深度神经网络应用于医学图像配准（MICCAI 2020 - Learn2Reg chanllenge）竞赛中的 SOTA 成果。其中，他们的 PDD-net 在所有挑战选手中排名前三，四个子任务分别获得两个第一名和三个第二名。以下是最近他们在 MICCAI 赛后发表的解释性文章。 我主要是关注他们在 Task 1 3D 多模态医学图像配准上的 SOTA 成绩。 Discrete Unsupe
uniapp项目 插件市场下载pdd-date-picker【年月日选择器】路径不对的问题
weixin_45041493的博客
01-13 447
从HBuilder插件市场下载pdd-date-picker年月日插件之后 按照t它的官方问的进行引入你会发现路径不对
java获取音频驱动程序_驱动程序---音频 MDD 和 PDD
weixin_32958777的博客
02-26 373
大多数 Windows CE 设备驱动程序都由一个平台相关驱动程序 (PDD) 和一个模型设备驱动程序 (MDD) 组成。整体式驱动程序 将所有 PDD 和 MDD 组合到一个驱动程序中。分层驱动程序 没有组合它们。MDD 具有下列特征：•包含给定类型的所有驱动程序所共有的代码。•调用 PDD 函数以访问硬件。•链接到 PDD 层，并且定义MDD 期望在该层中调用的设备驱动程序服务提供程序接口 (...
pdd的anti-token加密最新可用
qq_44130722的博客
05-06 925
最新anti-token解密可用
大棚光伏电站-中国自愿减排项目F-CCER-PDD文件
03-31
大棚光伏电站、分布式光伏，PDD文件
垃圾焚烧--自愿减排项目F-CCER-PDD文件.pdf
03-31
垃圾焚烧PDD文件
生物质发电-自愿减排项目F-CCER-PDD文件.pdf
03-31
生物质发电PDD文件
垃圾焚烧发电-自愿减排项目F-CCER-PDD文件.pdf
03-31
垃圾焚烧PDD文件
JavaScript_构建您的第一个移动应用程序.zip
05-20
JavaScript
手机应用源码新浪微博Android客户端.rar
05-20
手机应用源码新浪微博Android客户端.rar
俄罗斯方块项目【尚学堂·百战程序员】.zip
05-20
# 俄罗斯方块项目【尚学堂·百战程序员】 俄罗斯方块是一款经典的益智游戏，最早由俄罗斯程序员阿列克谢·帕基特诺夫于1984年开发。本项目基于【尚学堂·百战程序员】的课程内容，详细介绍如何使用JavaScript、HTML5和CSS3从零开始开发一个完整的俄罗斯方块游戏。该项目旨在帮助学习者掌握前端开发的基础知识和技能，提升编程能力。 ## 项目概述 本项目实现了经典的俄罗斯方块游戏，主要包括以下功能模块： ### 1. 游戏界面 游戏界面采用HTML5的Canvas元素进行绘制，使用CSS3进行样式设计。界面包括游戏区域、得分显示、下一个方块预览和控制按钮。通过合理的布局和美观的设计，为玩家提供良好的游戏体验。 ### 2. 方块生成与控制 游戏随机生成不同形状的方块（I、O、T、L、J、S、Z），玩家可以通过键盘控制方块的移动和旋转。具体操作包括： - 左移：按左箭头键。 - 右移：按右箭头键。 - 下移：按下箭头键。 - 旋转：按上箭头键。 ### 3. 方块下落与碰撞检测 方块自动从上到下逐行下落，速度逐渐加快。通过碰撞检测算法，判断方块是否与其他方块或底部边界
如何打造一个新品牌tbb.pptx
05-20
如何打造一个新品牌tbb.pptx
node-v14.2.0-headers.tar.xz
最新发布
05-20
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
光伏电站pdd项目文件
12-14
光伏电站PDD (Project Design Document) 项目文件是光伏电站项目开展前进行的一项重要文件，用于详细描述项目的设计方案、技术参数、环境影响评估、社会经济效益等内容。 光伏电站PDD项目文件一般包括以下几个方面...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值