uniapp scroll-view属性scroll-top或scroll-left的使用

Posted 2023-03-16

参考技术A scroll-top、scroll-left 设置滚动条竖向或横向位置：

以scroll-top 举例：

<scroll-view scroll-y="true" :scroll-top="scrollTop" class='nav-box' @scroll="scroll"> </scroll-view>

<view  @tap="goTop">点击回到顶部</view>

<script>

    export default

        data()

            return

                scrollTop:0,

                old: scrollTop: 0 ,

            

        ,

        methods:

            scroll : function(e)

                this.old.scrollTop = e.detail.scrollTop

            ,

            goTop : function()

                this.scrollTop = this.old.scrollTop

                this.$nextTick(function()

                    this.scrollTop=0;

                );

            

        

   

</script>

官方示例方法 ： scroll事件监听会监听滚动条处于的位置（e.detail）,将滚动条滚动的位置保存在old.scrollTop,当点击  回到顶部时， 将old.scrollTop赋值给scrollTop，视图会发生重新渲染，当视图渲染结束，接着触发 this.$nextTick，scrollTop被赋值为0，视图会再次渲染并回到顶部

如下直接赋值也可达到同样效果

            scroll : function(e)

                this.scrollTop = e.detail.scrollTop

            ,

            goTop : function()

                this.scrollTop = 0

            

            

uniapp横向滑动scroll-view

<scroll-view scroll-x="true" style="white-space: nowrap; padding: 10px;">
			<view class="meige">
				<image style="width: 300rpx;height: 300rpx;" src="../../static/shiliu_07.png"></image>
				<view>商品名称</view>
				<view style="color: #ff5001;">¥ 100.0</view>
			</view>

			<view class="meige">
				<image style="width: 300rpx;height: 300rpx;" src="../../static/shiliu_07.png"></image>
				<view>商品名称</view>
				<view style="color: #ff5001;">¥ 100.0</view>
			</view>
			<view class="meige">
				<image style="width: 300rpx;height: 300rpx;" src="../../static/shiliu_07.png"></image>
				<view>商品名称</view>
				<view style="color: #ff5001;">¥ 100.0</view>
			</view>
			

		</scroll-view>

.meige 
		display: inline-block;
		flex-direction: column;
		align-items: center;
		margin-right: 10px;