uni-app scroll-view横向滚动(原创+图文)
Posted Mr-Cui
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>
以上是关于uni-app scroll-view横向滚动(原创+图文)的主要内容,如果未能解决你的问题,请参考以下文章