uniapp横向滑动完整代码

效果：横向滑动

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

uniapp横向滑动完整代码相关推荐

uniapp ----小程序上下滑动页面，视频自动播放（完整代码）
uniapp ----小程序上下滑动页面,视频自动播放(完整代码) <template><view class="box"><f-navbar tit ...
uniapp开发微信小程序-4.页面跳转与横向滑动
uniapp开发微信小程序-4.页面跳转与横向滑动本篇文章主要是想记录一下横向滑动功能,备忘的同时给大家做个分享. 但既然是初级分享系列文章,为了方便新手朋友的上手工作,还是在此之前说一下页面跳转的 ...
【uni-app】UniApp实现微信小程序中拨打手机电话和长按加微信客服好友（完整代码示例）
UniApp实现微信小程序中拨打手机电话和长按加微信客服好友(完整代码示例) 一.service.Vue <template><view>& ...
uni-app小程序优惠券镂空样式实现(完整代码！！！)
优惠券半圆镂空效果利用渐变实现,核心代码示例: background: radial-gradient(circle at left top, transparent 6px, #ffd7d7 0) ...
2021年一个python画图的完整代码
本文作者用简单明了的语言解释了三日k线的交易原则,也分享了如何用python绘制k线图的方法和代码. 关于日本k线交易据说日本人在十七世纪就已经运用技术分析的方法进行大米交易,一位名叫本间宗久的坂田大 ...
marquee 循环空白解决方案完整代码+效果图
跑马灯无间隙无效循环滚动效果图: 本篇文章要实现的是跑马灯无间隙无效循环滚动: marquee 标签滚动完一次以后,第二次会空白一个屏幕宽度才开始,而我们的需求是接在后面马上开始.我在网上找了一圈,没 ...
仿网易新闻APP(五)——无限横向滑动菜单(自定义HorizontalScrollView+ViewPager)
自从Gallery被谷歌废弃以后,Google推荐使用ViewPager和HorizontalScrollView来实现Gallery的效果.的确HorizontalScrollView可以实现Gal ...
【神经网络】(14) MnasNet 代码复现，网络解析，附Tensorflow完整代码
各位同学好,今天和大家分享一下如何使用 Tensorflow 复现谷歌轻量化神经网络 MnasNet 通常而言,移动端(手机)和终端(安防监控.无人驾驶)上的设备计算能力有限,无法搭载庞大的神经网络 ...
RecyclerView横向滑动与ViewPager冲突问题
问题出现场景: TabLayout + ViewPager + Fragment,Fragment中包含一个横向滑动的RecyclerView,出现了左右滑动RecyclerView时会与ViewPa ...

uniapp横向滑动完整代码

uniapp横向滑动完整代码相关推荐

最新文章

热门文章