uniapp横向滑动完整代码

川长思鸟来 2023-01-02 03:26 125阅读 0赞

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

<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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70]: /images/20221120/5033cff7f7ee4495acb1abe518c8444c.png