每个人在成为自我之前,都必须打破之前固有的东西。这些经历并非肉眼可见,却是命运内在而本质的脉络
# 提前总结
基本没有这种反人类设计
# 描述
# 案例
为了方案使用uni-app示例,使用了scroll-view滚动,只有移动端有效果,PC是没效果的
<template>
<view>
<!-- 注:scroll-view滚动只有移动端有效果 -->
<view class="uni-margin-wrap">
<!-- 外部滚动 -->
<swiper class="swiper" next-margin="80rpx">
<swiper-item>
<view class="swiper-item uni-bg-red">
<!-- 内部滚动 -->
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
<view class="scroll-view-item_H fr-bg">A</view>
<view class="scroll-view-item_H fr-bg">B</view>
<view class="scroll-view-item_H fr-bg">C</view>
</scroll-view>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-green">B</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-blue">C</view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
export default {
data() {
return {}
},
methods: {}
}
</script>
<style>
.uni-margin-wrap {
width: 690rpx;
width: 100%;
}
.swiper {
height: 300rpx;
}
.swiper-item {
display: block;
height: 300rpx;
width: 94%;
margin-left: 3%;
border-radius: 40rpx;
text-align: center;
color: #fff;
}
.uni-bg-blue {
background-color: blue;
}
.uni-bg-green {
background-color: green;
}
.uni-bg-red {
background-color: red;
}
.scroll-view_H {
white-space: nowrap;
width: 100%;
}
.scroll-view-item_H {
display: inline-block;
height: 160rpx;
margin-top: 80rpx;
margin-bottom: 40rpx;
}
.fr-bg{
background-color: #fff;
border-radius: 30rpx;
margin-right: 30rpx;
width: 260rpx;
}
</style>
优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!
优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站、APP开发)、微信定制开发(微信官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。