scroll-view可滚动视图区域(左右滑动出现文字内容)

不念不忘少年蓝@ 2023-06-25 04:35 12阅读 0赞

### [scroll-view][]可滚动视图区域。 ###

实例代码：

**html部分：**

<scroll-view class="scroll-cont" scroll-x="true" @scroll="scroll" scroll-left="0">
    	<view class="srroll-details" :style="{width:200*curriculumList.length+'rpx'}">
    		<view class="uni-bg" v-for="(item,index) in  curriculumList" :key="index">
    			{
       {item.name}}
    		</view>		
    	</view>
    </scroll-view>

** js部分：**

data() {
    	return {
    		scrollTop: 0,
    		old: {
    				scrollTop: 0
    			},
    		curriculumList: [
    			{name: "全部"},
    			{name: "分类"},
    			{name: "分类"},
    			{name: "分类"},
    			{name: "分类"},
    			{name: "分类"},
    			{name: "分类"},
    		],
    	}
    }
    
    methods: {
    	scroll: function(e) {
    		console.log(e)
    		this.old.scrollTop = e.detail.scrollTop
    	},
    }

**css部分：**

.scroll-cont {
    	margin-left: 64rpx;
    		.srroll-details {
    			display: flex;
    				flex-direction: row;
    				color: #C0C8D3;
    					.uni-bg {
    						margin-right: 130rpx;
    						font-size: 28rpx;
    					}
    		}
    }

### 官方文档：[https://uniapp.dcloud.io/component/scroll-view][https_uniapp.dcloud.io_component_scroll-view] ###

[scroll-view]: https://uniapp.dcloud.io/component/scroll-view?id=scroll-view
[https_uniapp.dcloud.io_component_scroll-view]: https://uniapp.dcloud.io/component/scroll-view

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android屏蔽/禁止ViewPager左右滑动/滚动

Android屏蔽/禁止ViewPager左右滑动/滚动 Android原生的ViewPager自带左右滚动，滑动效果，切换ViewPager中的内容。但有时候，

妖狐艹你老母/ 2023年10月17日 21:48/ 0 赞/ 30 阅读

相关苹果手机可左右滑动的bug

> 今日在开发微信小程序的时候，发现苹果手机在某些页面可以左右滑动，出现空白的情况（安卓没有）。 > ![在这里插入图片描述][watermark_type_ZmFuZ3p

柔情只为你懂/ 2023年10月04日 13:31/ 0 赞/ 25 阅读

相关 scroll-view可滚动视图区域(左右滑动出现文字内容)

[scroll-view][]可滚动视图区域。实例代码： html部分： <scroll-view class="scroll-cont" scroll-x

不念不忘少年蓝@/ 2023年06月25日 04:35/ 0 赞/ 13 阅读

相关小程序可滚动视图区域的使用

<scroll-view class="tab" scroll-x="true"> <text>新闻1</text> <text>新闻2</

旧城等待，/ 2023年01月12日 01:52/ 0 赞/ 201 阅读

相关微信小程序（4）：可滚动视图区域组件

文章目录 scroll-view 可滚动视图区域 1、scroll-y：允许纵向滚动 2、sc

约定不等于承诺〃/ 2022年12月30日 13:59/ 0 赞/ 466 阅读

相关禁止scrollView滚动

1. 禁止上下滚动 contentsize.height =0即可 2.禁止左右滚动 contentsize.width = 0即可 3.禁止滚动 contentsi

雨点打透心脏的1/2处/ 2022年08月20日 11:28/ 0 赞/ 317 阅读

相关滚动条左右滑动

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na

妖狐艹你老母/ 2022年05月13日 07:54/ 0 赞/ 300 阅读

相关 Android ScrollView：滚动视图

当 Activity 提供的用户界面上有很多内容，以至于当前手机屏幕不能完全显示全部内容时，就需要滚动视图来帮助浏览全部的内容。以工程 WidgetDemo 为例，

朴灿烈づ我的快乐病毒、/ 2021年12月09日 23:15/ 0 赞/ 397 阅读

相关 Unity 3D ScrollView控件（滚动视图）

Scroll View控件可以设定一个滚动显示区域。如果GUI控件超出其显示区域，视图下方或者右方将会出现滚动条。比如游戏中帮助信息或关于信息过长，就可以使用滚动条来查看相关信

缺乏、安全感/ 2021年11月23日 02:22/ 0 赞/ 1190 阅读

相关小程序开发基础-scroll-view 可滚动视图区域

![标题图][1240] 小编 / 达叔小生小程序开发基础-scroll-view 可滚动视图区域这里只展示纵向滚动，横向同理就不用说明了，可自己尝试，横向滚动属

￡神魔★判官ぃ/ 2021年09月16日 05:46/ 0 赞/ 568 阅读