zoukankan      html  css  js  c++  java
  • uni-app 小程序实现scroll-view 横向滑动效果的坑

    最大盒子要100%高度,scroll-view的宽度不能设置固定宽度;

    	<scroll-view class="bottomBox" scroll-x="true" @scroll="scroll">
    		<view @click="go(i)" class="commodity" v-for="(item,i) in list" :key="i">
    			{{item.title}}
    		</view>
    	</scroll-view>
    
    
    list: [{
    						id: 1,
    						title: "111"
    					}, {
    						id: 2,
    						title: "2222"
    					}, {
    						id: 3,
    						title: "3333"
    					}, {
    						id: 4,
    						title: "3333"
    					},
    					{
    						id: 5,
    						title: "3333"
    					},
    				],
    

    此外无论是组件还是写在一个页面内 最大的盒子记得加上height:100%;

    .bottomBox {
    			 100%; // 一定不能给固定宽度,会失效
    			height: 100%;
    			background-color: aqua;
    			white-space: nowrap; //这个属性一定要添加
    			padding: 20upx;
    
    			.commodity {
    				display: inline-block;//这个也是一定要添加的
    				 196upx;
    				height: 360upx;
    				margin-right: 11upx;
    				background-color: pink;
    			}
    		}
    
  • 相关阅读:
    mysql常用命令
    CSS样式
    定位
    background
    文本属性和字体属性
    超链接导航案例
    margin塌陷
    浮动
    GIT 修改提交地址
    VUE ElementUI 表格多选框实现单选
  • 原文地址:https://www.cnblogs.com/caoxueyang/p/13962102.html
Copyright © 2011-2022 走看看