微信小程序的scroll-view标签及部分问题

「爱情、让人受尽委屈。」 2023-07-22 05:56 49阅读 0赞

scroll-view标签表示的是一个可以滚动的view标签。
支持很多属性，其中scroll-x和scroll-y是使用的比较多的：具体属性，参考微信开发文档
下面使用一个简单的允许上下滚动的小实例：
先在wxml文件当中使用view标签嵌套，在scroll-view标签里面就是可以滚动的标签，给scroll-view标签加上scroll-y属性，表示允许纵向滚动

  1. <view class="test">
  2. <scroll-view scroll-y class="test2">
  3. <view>123456</view><view>45976</view><view>845967</view><view>451237</view>
  4. <view>123456</view><view>45976</view><view>845967</view><view>451237</view>
  5. <view>123456</view><view>45976</view><view>845967</view><view>451237</view>
  6. <view>123456</view><view>45976</view><view>845967</view><view>451237</view>
  7. <view>123456</view><view>45976</view><view>845967</view><view>451237</view>
  8. <view>123456</view><view>45976</view><view>845967</view><view>451237</view>
  9. <view>123456</view><view>45976</view><view>845967</view><view>451237</view>
  10. <view>123456</view><view>45976</view><view>845967</view><view>451237</view>
  11. <view>123456</view><view>45976</view><view>845967</view><view>451237</view>
  12. <view>123456</view><view>45976</view><view>845967</view><view>451237</view>
  13. <view>123456</view><view>45976</view><view>845967</view><view>451237</view>
  14. <view>123456</view><view>45976</view><view>845967</view><view>451237</view>
  15. </scroll-view>
  16. </view>

随后在相对应的wxss文件当中给最外层的view标签加上高度：

  1. .test{
  2.   height: 400rpx;
  3. }
  4. .test2{
  5.   height: 400rpx
  6. }

最后看一下效果图：
在这里插入图片描述
最后，当只用这个组件的时候出现上下滚动不可实现的时候，一定要去看一下在控制台那一栏的wxml里面查看对应标签的高度，只有外层高度不能完全装下scroll-view标签的高度才会有滚动效果：
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，49人围观）

还没有评论，来说两句吧...

相关阅读

    相关 微信小程序常用标签

    1. view 这个标签相当于div(它的特点就是在没有其他样式影响的情况下，宽度100%)； 2. text 这个标签相当于span(它的特点就是在没有其他样式影响的情况

    心已赠人心已赠人/ 0 赞/ 395 阅读