【技术】uniapp 之 scroll-view demo

效果图

uniapp ios app滑动返回触发什么事件_前端

实现

scroll-view 可滚动视图区域。可以做成小卡片的形式，用于左右滑动。

<template>
<view class="skill-sequence-panel-content-wrapper">
			<!--左边虚化-->
			<view class="hide-content-box hide-content-box-left"></view>
			<!--右边虚化-->
			<view class="hide-content-box hide-content-box-right"></view>
			<scroll-view scroll-x="true" class="kite-classify-scroll">
				<view class="kite-classify-cell shadow" v-for="(item, index) in curriculum" :key="index">
					<view :class="'nav-li bg-index' + (index + 1)">
						<view class="nav-name">{{ item.name }}</view>
					</view>
					<view class="nav-content">{{ item.content }}</view>
					<view @click="goVideo" class="nav-btn shadow" :class="'bg-index' + (index + 1)">立即学习</view>
				</view>
			</scroll-view>
		</view>
</template>

<script>
      export default {
        curriculum: [{
						name: 'uniapp项目开发',
						content: 'uniapp小程序商城系统开发，实战项目...'
					},
					{
						name: '后台管理系统',
						content: 'vue+iview的后台管理系统建设系统开发...'
					},
					{
						name: 'App模板',
						content: '基于uniapp开发的效率类APP，开发至上线...'
					},
					{
						name: 'PC端官网开发',
						content: 'html/css/jQuery建设的PC端官方门户网站...'
					},
					{
						name: 'uniapp多端打包',
						content: 'uniapp开发完成上线的打包流程，上架商店等...'
					}
				],
      }
</script>

<style lang="scss" scoped>
/*scroll-view外层*/
	.skill-sequence-panel-content-wrapper {
		position: relative;
		white-space: nowrap;
		padding: 10rpx 0 10rpx 10rpx;
	}

	/*左右渐变遮罩*/
	.hide-content-box {
		position: absolute;
		top: 0;
		height: 100%;
		width: 10px;
		z-index: 2;
	}

	.hide-content-box-left {
		left: 0;
		background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #f3f3f3 60%);
	}

	.hide-content-box-right {
		right: 0;
		background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #f3f3f3 60%);
	}

	.kite-classify-scroll {
		width: 100%;
		height: 380rpx;
		overflow: hidden;
		white-space: nowrap;
	}

	.kite-classify-cell {
		display: inline-block;
		width: 266rpx;
		height: 370rpx;
		margin-right: 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 2px 2px 3px rgba(26, 26, 26, 0.2);
	}

	.nav-li {
		padding: 40rpx 30rpx;
		width: 100%;
		background-image: url(https://s1.ax1x.com/2020/06/27/NyU04x.png);
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
	}

	.nav-name {
		font-size: 28upx;
		text-transform: Capitalize;
		margin-top: 20upx;
		position: relative;
	}

	.nav-name::before {
		content: '';
		position: absolute;
		display: block;
		width: 40rpx;
		height: 6rpx;
		background: #fff;
		bottom: 0;
		right: 0;
		opacity: 0.5;
	}

	.nav-name::after {
		content: '';
		position: absolute;
		display: block;
		width: 100rpx;
		height: 1px;
		background: #fff;
		bottom: 0;
		right: 40rpx;
		opacity: 0.3;
	}

	.nav-content {
		width: 100%;
		padding: 15rpx;
		display: inline-block;
		overflow-wrap: break-word;
		white-space: normal;
	}

	.nav-btn {
		width: 200rpx;
		height: 60rpx;
		margin: 8rpx auto;
		text-align: center;
		line-height: 60rpx;
		border-radius: 10rpx;
	}

	.bg-index1 {
		background-color: #19cf8a;
		color: #fff;
	}

	.bg-index2 {
		background-color: #954ff6;
		color: #fff;
	}

	.bg-index3 {
		background-color: #5177ee;
		color: #fff;
	}

	.bg-index4 {
		background-color: #f49a02;
		color: #fff;
	}

	.bg-index5 {
		background-color: #ff4f94;
		color: #fff;
	}

	.bg-index6 {
		background-color: #7fd02b;
		color: #fff;
	}

	.item-name {
		margin-bottom: 15rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
</style>

属性说明

属性名

类型

默认值

说明

平台差异说明

scroll-x

Boolean

false

允许横向滚动

scroll-y

Boolean

false

允许纵向滚动

upper-threshold

Number/String

50

距顶部/左边多远时（单位px），触发 scrolltoupper 事件

lower-threshold

Number/String

50

距底部/右边多远时（单位px），触发 scrolltolower 事件

scroll-top

Number/String

设置竖向滚动条位置

scroll-left

Number/String

设置横向滚动条位置

scroll-into-view

String

值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素

scroll-with-animation

Boolean

false

在设置滚动条位置时使用动画过渡

enable-back-to-top

Boolean

false

iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向

app-nvue，微信小程序

show-scrollbar

Boolean

false

控制是否出现滚动条

App-nvue 2.1.5+

refresher-enabled

Boolean

false

开启自定义下拉刷新

H5、app-vue 2.5.12+,微信小程序基础库2.10.1+

refresher-threshold

Number

45

设置自定义下拉刷新阈值

H5、app-vue 2.5.12+,微信小程序基础库2.10.1+

refresher-default-style

String

“black”

设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式

H5、app-vue 2.5.12+,微信小程序基础库2.10.1+

refresher-background

String

“#FFF”

设置自定义下拉刷新区域背景颜色

H5、app-vue 2.5.12+,微信小程序基础库2.10.1+

refresher-triggered

Boolean

false

设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发

H5、app-vue 2.5.12+,微信小程序基础库2.10.1+

enable-flex

Boolean

false

启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。

微信小程序 2.7.3

scroll-anchoring

Boolean

false

开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。

微信小程序 2.8.2

@scrolltoupper

EventHandle

滚动到顶部/左边，会触发 scrolltoupper 事件

@scrolltolower

EventHandle

滚动到底部/右边，会触发 scrolltolower 事件

@scroll

EventHandle

滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

@refresherpulling

EventHandle

自定义下拉刷新控件被下拉

H5、app-vue 2.5.12+,微信小程序基础库2.10.1+

@refresherrefresh

EventHandle

自定义下拉刷新被触发

H5、app-vue 2.5.12+,微信小程序基础库2.10.1+

@refresherrestore

EventHandle

自定义下拉刷新被复位

H5、app-vue 2.5.12+,微信小程序基础库2.10.1+

@refresherabort

EventHandle

自定义下拉刷新被中止

H5、app-vue 2.5.12+,微信小程序基础库2.10.1+

参考文章

官网 scroll-view

源码