uniapp横向滑动完整代码

最新推荐文章于 2025-04-02 15:05:31 发布

一颗前端子

最新推荐文章于 2025-04-02 15:05:31 发布

阅读量2.1k

点赞数

分类专栏： uniapp 文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/qq_43408070/article/details/112186005

版权

uniapp 专栏收录该内容

9 篇文章

订阅专栏

效果：横向滑动
在这里插入图片描述

<template>
	  <view class="content">
	        <scroll-view scroll-x="true" class="scroll">
	            <view class="box">
	                <image src="http://b-ssl.duitang.com/uploads/item/201703/01/20170301163305_sCd8j.gif" class="images"></image>
	                <view>作品 123445</view>
	                <view>联系电话 134****4152</view>
	            </view>
	            <view class="box">
	                <image src="http://b-ssl.duitang.com/uploads/item/201703/01/20170301163305_sCd8j.gif" class="images"></image>
	                <view>作品 123445</view>
	                <view>联系电话 134****4152</view>
	            </view>
	            <view class="box">
	                <image src="http://b-ssl.duitang.com/uploads/item/201703/01/20170301163305_sCd8j.gif" class="images"></image>
	                <view>作品 123445</view>
	                <view>联系电话 134****4152</view>
	            </view>
	            <view class="box">
	                <image src="http://b-ssl.duitang.com/uploads/item/201703/01/20170301163305_sCd8j.gif" class="images"></image>
	                <view>作品 123445</view>
	                <view>联系电话 134****4152</view>
	            </view>
	            <view class="box">
	                <image src="http://b-ssl.duitang.com/uploads/item/201703/01/20170301163305_sCd8j.gif" class="images"></image>
	                <view>作品 123445</view>
	                <view>联系电话 134****4152</view>
	            </view>
	            <view class="box">
	                <image src="http://b-ssl.duitang.com/uploads/item/201703/01/20170301163305_sCd8j.gif" class="images"></image>
	                <view>作品 123445</view>
	                <view>联系电话 134****4152</view>
	            </view>
	        </scroll-view>
	    </view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>
<style scoped>
    .content {
        padding: 0 30upx;
    }
 
    .scroll {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
    }
 
    .box {
        display: inline-block;
        width: 520upx;
        height: 600upx;
        background: #0062CC;
        margin-right: 30upx;
    }
 
    .box:last-child {
        margin-right: 0;
    }
 
    .images {
        width: 520upx;
        height: 360upx;
        border-radius: 16upx;
    }
</style>