uniapp通过scroll |
您所在的位置：网站首页 › 发布图文的时候怎么才左右滑动 › uniapp通过scroll |
uniapp通过scroll
|
记录一下商城系统常见的分类模块，左右菜单滚动联动。 方法1： 主要用到scroll-view的scroll-into-view （值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素） 官方说法：uniapp-scrollview 方法2： 因为部分需求问题，我决定右侧模块使用swiper； 我们想要的效果是，上下滑动一部分，就直接滚动到下一个，不存在让显示一半。 懒得计算比对滚动距离了，所以决定使用swiper 方法1代码： 头部固定区域 {{item.id}} // 这块显示根据自己项目需求进行改变 // 我这边的横向滚动是因为产品要求，一般情况下都是罗列成小图标加标题 左边是第{{ index + 1 }}个 右边是第{{ index2+1 }}个 export default { data() { return { leftArray: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }, { id: 8 }, ], mainArray: [], topArr: [], leftIndex: 0, isMainScroll: false, scrollInto: '' } }, mounted() { this.getListData(); }, methods: { /* 获取列表数据 */ getListData() { /* 因无真实数据，当前方法模拟数据 */ let [left, main] = [ [], [] ]; for (let i = 0; i { this.getElementTop(); }, 10) }); }, //获取距离顶部的高度 getScrollTop(selector) { return new Promise((resolve, reject) => { let query = uni.createSelectorQuery().in(this); query.select(selector).boundingClientRect(data => { resolve(data.top) }).exec(); }) }, /* 获取元素顶部信息 */ async getElementTop() { /* Promise 对象数组 */ let p_arr = []; /* 遍历数据，创建相应的 Promise 数组数据 */ for (let i = 0; i { let top = res; // #ifdef H5 top += 43; //因固定提示块的需求，H5的默认标题栏是44px // #endif /* 所有节点信息返回后调用该方法 */ Promise.all(p_arr).then((data) => { this.topArr = data; }); }) }, /* 主区域滚动监听 */ mainScroll(e) { if (!this.isMainScroll) { return; } let top = e.detail.scrollTop; let index = -1; if (top >= this.topArr[this.topArr.length - 1]) { index = this.topArr.length - 1; } else { index = this.topArr.findIndex((item, index) => { return this.topArr[index + 1] >= top; }); } this.leftIndex = (index |
【本文地址】
今日新闻 |
推荐新闻 |