uniapp利用scroll

uniapp利用scroll"/>

uniapp利用scroll

前言：如果左边数据少的话其实可以不用scroll-view，直接弄出一块一块可以点击的就行，我这里是数据还没有确定，所以需要写个scroll-view提前准备，因为数据多和少都可以使用scroll-view

-----------------------------------------------------无情的分割线-------------------------------------------------------

1.首先我们准备一个容器(flex布局)包裹住两边scroll-view，然后分为左右两块：先写左边

<view class="left">
<scroll-view scroll-y="true" class="sll" :scroll-into-view="'tab'+tab">
<view class="item" v-for="(item,index) in leftlist" :key="item.id" :class="idx==index?'choose':'item'" @click="clksc(index)" :id="'tab'+index">
<view class="small" v-show="idx==index"></view>	<view class="fontt">{{item.name}}
</view>
</view>
</scroll-view>
</view>

2.再写右边的scroll-view：数据写的有点乱但是我们主要看scroll-view的问题

<view class="right">
<scroll-view scroll-y="true" class="scroll" 
:scroll-into-view="'into'+into" 
:style="{ 'height': windowH + 'px' }">
<view v-for="(i,t) in rightlist" :key="i.id" class="right" 
:id="'into'+t" @touchmove="touch(t)">
<view class="top">{{i.name}}</view>
<view class="r-bom" v-for="(im,idx) in i.data" :key="idx">
<image :src="im.img"></image>
<view class="qiangwan" v-if="im.status">
<image src="../../static/已抢光.png" >
</image></view>
<view><text class="bigname">{{im.name}}</text>
<view class="goods-bom" v-if="im.jifen">
<text class="bigprice">55</text>
<text class="jifen">积分</text>
<text class="jia" v-if="im.jia">+</text>
<div class="jiu" v-if="im.jiu"><div class="money">￥</div><div class="j">9</div></div>
<view class="oldprice" v-if="im.old">或原价<text>￥98</text></view></view>
</view>
</view>
<lines></lines>
</view>
</scroll-view>
</view>

3.写这个的时候发现的问题：(大佬请绕道，本萌新遇到的问题，总结一下)

(1)首先我们利用scroll-into-view滚动出现了左边点了右边的没有反应，这时候我们还缺少一步。

(2)给我们的数据循环绑定一个id例如:id="不能以数字开头"+索引号,就是循环的index，绑定了id之后就可以实现滚动了......吗？还是不行，还缺少一个非常重要的一步，我在这里卡了一天

(3)然后我就觉得右边用scroll-view实现不了页面滚动，就是用了轮播图，但是发现轮播图不能实现上下的数据衔接在一起，它是页面分开的，所以我在这里卡了一天，最后看了个博主scorll-view的总结，顿时茅塞顿开，发现了一个非常重要的前提。

(4)就是每一个scroll-view都要给一个高度，这里的话我左边因为是fixed固定布局就固定高度了，但是右边的应该随着数据的增加，高度也要随之增加，那么我们就要在onReady页面生命周期使用获取高度方法，就可以实现左边按钮点击定位到右边相应的栏目，也可以右边滚动左边也随之滚动了

onReady() {// 计算屏幕剩余高度  填补剩余高度let _this = thisuni.getSystemInfo({success(res) {_this.windowH = res.windowHeight}})}

点击左边定位到右边相应的栏目

滑动右边让左边定位到相应的位置