微信小程序view和scroll-view组件的基本使用

Posted 2023-04-02 hacker707

✅作者简介：CSDN内容合伙人、阿里云专家博主、51CTO专家博主🏆
📃个人主页：hacker707的csdn博客
🔥系列专栏：微信小程序
💬个人格言：但行好事，莫问前程

view和scroll-view

• 小程序组件的分类
• 常见的视图容器类组件
• view组件的基本使用
• scroll-view组件的基本使用
• 结束语

小程序组件的分类

小程序中的组件也是由宿主环境提供的，开发者可以使用组件快速搭建出页面结构，官方把小程序里的组件分为了9大类，分别是
①视图容器
②基础内容
③表单组件
④导航组件
⑤媒体组件
⑥map地图组件
⑦canvas画布组件
⑧开放能力
⑨无障碍访问

常见的视图容器类组件

①view
普通视图区域
类似于html中的div，是一个块级元素
常用于实现页面的布局效果
②scroll-view
可滚动的视图区域
常用于实现滚动列表效果
③swiper和swiper-item
轮播图容器组件和轮播图item组件

view组件的基本使用

🔥在hacker页面实现如图所示的flex横向布局效果：

✅hacker.wxml

<!--pages/hacker/hacker.wxml-->
<view class="container1">
    <view>A</view>
    <view>B</view>
    <view>C</view>
</view>

✅hacker.wxss

/* pages/hacker/hacker.wxss */
.container1 view
    width: 100px;
    height: 100px;
    text-align:center;
    line-height: 100px;

.container1 view:nth-child(1)
    background-color:lightgreen;

.container1 view:nth-child(2)
    background-color: lightskyblue;

.container1 view:nth-child(3)
    background-color: lightpink;


.container1
    display: flex;
    justify-content: space-around;

scroll-view组件的基本使用

🔥在hacker页面实现如图所示的纵向滚动效果：

✅hacker.wxml

<!--pages/hacker/hacker.wxml-->
<!--scroll-y属性：允许纵向滚动-->
<!--scroll-x属性：允许横向滚动-->
<!--注意：使用竖向滚动时必须给scroll-view一个固定高度-->
<scroll-view class="container1"scroll-y>
    <view>A</view>
    <view>B</view>
    <view>C</view>
</scroll-view>

✅hacker.wxss

/* pages/hacker/hacker.wxss */
.container1 view
    width: 100px;
    height: 100px;
    text-align:center;
    line-height: 100px;

.container1 view:nth-child(1)
    background-color:lightgreen;

.container1 view:nth-child(2)
    background-color: lightskyblue;

.container1 view:nth-child(3)
    background-color: lightpink;


.container1
    width: 100px;
    /* 给 scroll-view 固定高度 */
    height: 100px;

结束语

以上就是微信小程序之view和scroll-view组件的基本使用
持续更新微信小程序教程，欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是hacker创作的动力💖💖💖

微信小程序采坑之scroll-view组件

今天在使用scroll-view组件的时候发现结果跟预想的不一样。其实也不是第一次用了，同样的写法却出现了意料之外的效果，所以认定是bug了。博主使用的是2.3.0版本，所以之前的版本应该也会有这个bug。

 

一、摘要

　　今天在使用scroll-view组件的时候发现结果跟预想的不一样。其实也不是第一次用了，同样的写法却出现了意料之外的效果，所以认定是bug了。博主使用的是2.3.0版本，所以之前的版本应该也会有这个bug。

二、正文

　　先上图

　　这是在scroll-view中添加这么些text组件的时候的效果，代码我就不上了。发现文本组件莫名其妙的被挤下来了一些，我可是没有设置上边距的，而且留白的地方也没有任何东西。

　　经过我苦思冥想以及各种尝试发现把中文换成英文或者数字，结果就不一样了。忘记说了，这个scroll-view设置的是x方向滑动。

　　可以发现这次超出的部分没有自动换行了，而且可以左右滑动了，但是留白部分依然存在。

　　我现在的需求是需要用中文，而要能滑动。之前导致无法滑动的原因是由于文本自动换行造成的。例如第三个text的“文本组件”这四个字竟然被分到两行，然后去控制台看布局的时候发现是这样的。

　　厉害了，这文本组件竟然变成这样，更奇怪的是还没有影响其它兄弟组件的布局。

　　咋整呐？抱着试一试的心态，我在scroll-view的样式中添加了这么一行代码。

white-space: nowrap;

　　奇迹出现了，看下面的效果。

　　这是我向右边拖动了一点点的效果。相信大家也能看懂上面那行css吧，就是强制不换行的意思。我猜测官方是用div去实现这个scroll-view的，而且没有设置这条属性，所以默认就是自动换行了。

　　我们再来看下下面这个scroll-view的使用。

　　大家可能跟我一样很奇怪，为啥这个就可以正常滑动呐。这里面我是没有强制不换行的。比较一些这两者的区别就知道为啥了。因为下面这个scroll-view中使用了图片，图片的宽度远远大于文字。而且我把图片和文字放在了一个view中，所以整个view的宽度以图片为主。

三、总结

　　scroll-view中的元素大致分为两类，一类是中文，一类是非中文。使用中文类的组件时候（也就是需要呈现中文的组件，不限于text组件）是会自动换行的，这时候需求在css中强制不换行。在使用非中文组件时候就一切正常。

　　至于为啥使用中文组件会有一部分留白，这个我不知道是个例还是bug，反正只需要用相对定位移一下就可以了。虽然这不是最好的解决方案，但是目前也没有更好的选择。