UniAPP 仿青藤之恋首页Table禁止用户切换并且根据滑动显示按钮效果实现

最新推荐文章于 2024-01-21 08:15:45 发布

Thanks-

最新推荐文章于 2024-01-21 08:15:45 发布

阅读量572

点赞数

分类专栏： uni uni-app vue 文章标签： uni-app 前端 servlet

本文链接：https://blog.csdn.net/Libertied/article/details/126411489

版权

vue 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

uni-app

5 篇文章 1 订阅

订阅专栏

uni

2 篇文章 0 订阅

订阅专栏

话不多说：直接贴代码

<template>
	<view class="content">

		<swiper class="swiper-parent" vertical="true"  :current="current" disable-touch="true">
			<swiper-item v-for="(item,index) in dataList">
				<scroll-view class="swiper-intro" scroll-y="true" @scroll="scroll">
					<view class="swiper-intro-view">
						<text class="swiper-intro-text">{{item.name}}</text>
						<text class="swiper-intro-text">{{item.name}}</text>
						<text class="swiper-intro-text">{{item.name}}</text>
						<text class="swiper-intro-text">{{item.name}}</text>
						<text class="swiper-intro-text">{{item.name}}</text>
						<text class="swiper-intro-text">{{item.name}}</text>
						<text class="swiper-intro-text">{{item.name}}</text>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>


		<button class="next-button" style="width: 200rpx;height: 60rpx;text-align: center;"@click="nextClick">切换下一个</button>

		<button class="like-button" :style="showlike ? 'width: 200rpx;height: 60rpx;text-align: center; bottom: 50rpx;' : 'width: 200rpx;height: 60rpx;text-align: center; bottom: 30rpx;' ">喜欢</button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [{
					name: "测试Swiper-Item"
				}, {
					name: "测试Swiper-Item1"
				}, {
					name: "测试Swiper-Item2"
				}, {
					name: "测试Swiper-Item3"
				}],
				current: 0,
				showlike: true
			}
		},
		onLoad() {

		},
		methods: {
			nextClick() {
				this.current += 1
				this.showlike = true
			},
			scroll(e){
				if(e.detail.scrollTop > 60){
					this.showlike = false
				}else{
					this.showlike = true
				}
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.swiper-parent {
		background-color: antiquewhite;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	.swiper-intro {
		height: 100%;
	}
	
	.swiper-intro-view{
		display: flex;
		flex-direction: column;
	}

	.next-button {
		position: absolute;
		bottom: 50rpx;
	}
	
	.swiper-intro-text{
		width: 300rpx;
		height: 300rpx;
	}
	
	.like-button{
		position: absolute;
		left: 30rpx;
	}
	
</style>