微信小程序第一天无基础学习
今天学习了标签
要做到拖拽可滑动的效果必须要用到以上的属性,y是纵向滑动,x是横向滑动,这里主要介绍横向滑动的使用方法
scroll-x属性才具备了拖动效果,但是如果只有scroll-x属性会出现一下情况
换行需要在wxss中添加white-space: nowrap
和display: inline-block;
表示横向显示。如有需要设置位置的开始滑动位置可以使用scrol-left
,动画显示为scroll-with-animation
在index.wxml的代码如下:
<scroll-view class="out" scroll-left="200" scroll-with-animation scroll-x>
<view class="box">1</view>
<view class="box">2</view>
<view class="box">3</view>
<view class="box">4</view>
<view class="box">5</view>
<view class="box">6</view>
<view class="box">7</view>
<view class="box">8</view>
</scroll-view>
wxss代码如下:
.out{
width: 100%;
background: #ccc;
white-space: nowrap
/* 不换行 */
}
.out .box{
width: 100px;
height: 100px;
background: pink;
display: inline-block;
margin-right: 2px
}
版权声明:本文为weixin_46362658原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。