微信小程序第一天无基础学习
今天学习了标签
在微信小程序API的文档
要做到拖拽可滑动的效果必须要用到以上的属性,y是纵向滑动,x是横向滑动,这里主要介绍横向滑动的使用方法可横向拖动
scroll-x属性才具备了拖动效果,但是如果只有scroll-x属性会出现一下情况
不换行
换行需要在wxss中添加white-space: nowrapdisplay: 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 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/weixin_46362658/article/details/105186694