uni-app scroll-view横向滚动(原创+图文)
作者:互联网
废话不多说,先上效果图,再上源码!!!!
1.效果图
2.源码
<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>
标签:4152,联系电话,app,作品,width,134,uni,123445,scroll 来源: https://www.cnblogs.com/fanqiuzhuji/p/12129382.html