• uni横向滑动


    			<view class="content-box-scroll" v-show="btnList.length > 0">
    				<scroll-view scroll-x style="white-space: nowrap; 100%;">
    					<block v-for="(item, index) in btnList" :key="index">
    						<view @tap="clickBtnChange(item,index)" class="btn-sty-yel-two" :class="[selectIndex===index ? 'select-bg' : 'no-select-bg']">
    							<view class="btn-sty-yel-two-childern">
    								{{item.name}}
    							</view>
    						</view>
    					</block>
    				</scroll-view>
    			</view>
    

      

    <scroll-view scroll-x style="white-space: nowrap; 100%;">
    </scroll-view>
    .content-box-scroll {
    	height: 120rpx;
    	display: flex;
    	align-items: center;
    }
    .btn-sty-yel-two {
    	display: inline-block; // 非常重要与 display: inline 相比,主要区别在于 display: inline-block 允许在元素上设置宽度和高度。用通俗的话讲,就是不独占一行的块级元素
    	height: 60rpx;
    	 200rpx;
    	border-radius: 5rpx;
    	margin-left: 10rpx;
    	margin-right: 10rpx;
    	.btn-sty-yel-two-childern {
    		font-size: 30rpx;
    		display: flex;
    		justify-content: center;
    		align-items: center;
    		height: 100%;
    	}
    }

    .no-select-bg {
    border: 1rpx solid #FFFFFF;
    color: #FFFFFF;
    opacity: 0.8;
    }
    .select-bg {
    color: #5857D7;
    background: #FFFFFF;
    }

      

  • 相关阅读:
    第八次作业
    第七次作业2
    jsp第十一次作业
    jsp第十次作业
    jsp第九次作业
    jsp第八次作业
    jsp第七次作业
    jsp第六次作业
    软件测试第二次作业
    jsp第五次作业
  • 原文地址:https://www.cnblogs.com/fdxjava/p/15657761.html
Copyright © 2020-2023  润新知