scroll-view如何使用

微信小程序 scroll view 组件的基本使用，今天我们来了解一下 scroll view 组件的基本使用，那比如说我们希望使用这个组件来实现如图这样的一个纵向滚动的效果。我们先来分析一下，比如说这个黑框是一个有高度的容器， 然后里面有三个紫元素，分别是 abc， 然后咱们通过鼠标或者自己的小手在这里往上拖的话，这里面的三个元素会进行上下滚动，那么这个效果要实现的话，其实非常的简单，咱们总共有三个步骤， 那第一步呢，我们需要将最外层的容器设置成 show view 这个组件，然后第二步咱们需要给这个组件加一个属性，是 screw y， 代表说我们允许在纵向上进行滚动。注意啊， 如果允许纵向滚动的话，需要加一个 scroll y 属性，如果是横向滚动，那就是 scroll x， 同时为了让它能够实现纵向滚动的效果，还必须给这个 scroll view 组件加上一个固定的高度，那于是咱们通过这个样式的形式 给他加了一个固定的高度，是一百五十个像素，那为了让他更加的清晰，咱们可以加一个边框线，同时也给他限制了一下宽度。 清楚地了解这个实现的过程之后，那接下来咱们打开微信开发者工具，咱们可以直接基于上个视频的 flags 横向布局效果来进行修改。 上一个视频咱们外面包裹性质的容器是一个普通的 view， 里面是没有办法实现这种滚动效果的，那接下来咱们可以把包裹性质的容器 从 view 替换成 shrew view， 同时也修改一下结束标签，同时咱们为了开启它纵向滚动的效果，还要给添加一个属性 scroll y， 代表说我们允许在纵向上进行滚动， 那么这个时候大家发现这个效果好像并没有出现，那接下来咱们还少一些样式，因为默认情况下你如果这么写的话是没有办法进行滚动的，咱们还需要给外层包裹性的容器加一个强制性的高度才可以。咱们打开自己的样式表， 咱们就不再进行 flex 布局了。先清空给他添加一个边框线，咱们先看一下外面的容器宽度和高度分别是多少。咱们保存可以看到外面这个包裹性容器，他的高度就是里面三个盒子的总高度，他的 宽度是占满整个横向的区域，那接下来咱们可以限制它的宽度，宽度咱们给它设置一百 p x， 然后保存。这个时候大家可以发现这个黑色的边框线就变得只有一百个像素了，但是这个还是没有滚动的效果， 咱们之前说过还需要加一个限定的高度才能实现纵向的滚动。来咱们加一个高度一百五十 px， 咱们保存看一下效果，我鼠标放上去 网上拖动，可以发现咱们外面这个容器就能够让里面的内容进行滚动了。这里注意之前咱们介绍过，在一些电商的移动端项目里面， 是不是经常可以见到一个左侧的滚动列表效果，其实咱们就可以基于 shrow view 这个组件来进行实现，那么实现的过程总共有三步， 第一步，设置外层包裹性容器为 shiro view。 第二步，如果是纵向滚动的话，要加一个属性 shiro y， 如果是横向滚动，就是加一个属性 scroll x。 第三步，通过样式的形式添加一个强制性的宽度或高度，在固定的宽度中，如果里面的内容超出了咱们设置的区域了，就会出现滚动效果。记得点赞、关注、收藏，咱们下期见！

朋友们好，从这节课开始啊，咱们一起来学习小程序里面组建相关的内容。那首先呢，我们来了解一下小程序中组建的分类， 那小成语里面的组建啊，哎，其实也是由宿主环境提供的，那么咱们开发者呢，可以基于这些组建，快速的搭建出漂亮的 页面结构。那小程序官方呢，哎，把组件分成了九大类啊，那这个分类有点多，咱们就不再挨个去看了，其中啊，老师把比较常用的组件给他去做两下标红啊，比如说像试图容器类的组件呢啊，咱们会比较常用啊， 又比如说像基础内容的组建，还有表单组建以及导航组建，咱们用的呢也是比较多的。 ok 啊，那接下来我们先去了解一下，看小程序里面都有哪些常见的 试图容器类型的主线啊，那总共有三个啊，是比较常用的，第一个呢是 view， 第二个是 scroll guard view， 第三个呢是 swipe 还有 swipe gun。 那首先呢，我们来了解一下，这个 view 组建是来干嘛的啊？这个 view 组建呢，哎，就是一个普通的仕途区域组建，它呢类似于咱们 html 里面的 div 元素啊，它呢也是一个跨级的 元素，通过这个 vivo 啊啊，可以来快速的实现咱们页面的布局效果。那咱们都知道啊，在 htm 里面，如果要实现页面布局的话，用的最多的啊，就是 div 元素了。 但是呢，在小程序里面啊，咱们要实现页面布局的话呢，还用的最多的就是这个 vivo 元素，它就相当于是网页里面的 div 元素，还用来实现布局的。那接下来 来第二个比较常用的仕途容器组件，就是四个肉 gar view， 它呢是一个可滚动的仕途区域啊，经常用来实现滚动的列表效果。来举个例子啊， 都应该用过手机京东对不对啊？哎，在京东里面呢，是不是有一个底部的泰本栏，那你点击到分类的时候，你发现左侧是不是有一个可以滚动的一个列表区域？那么在咱们小程序里面啊，就可以通过死个肉杠 view 这个组件啊，来实现左侧这个滚动的列表试图效果啊， 这咱们 skr 刚 view 啊，经常来实现的一个列表效果，那接下来啊，就是 spapper 还有 swipe 嘎艾特，那这两个呢，分别是轮波图的容器组件，还有轮波图的艾特木象组件，那比如说在咱们这个项目的首页啊，哎，可能会有一些轮播图的这个效， 对不对啊？那么这个轮毂图外面是有一个容器的，这个容器啊，就是我们的 swipe 组线，那里面的每一个可以轮播的艾特木像啊，都是通过 swipe 干艾特木来实现的，那所以说通过小程序里面提供的这些组件，就能够快速的实现页面的精美布局。 那好，这节课关于咱们小生意里面组建的分类以及常用的仕途容器组建啊，我们就先为大家介绍到这里， 这一节课呢，我们来了解一下 view 组建的基本使用，那比如说我们要在页面上啊，实现如图这样的一个 flex 横向布局的效果啊，在里面呢有三个元素，分别是 a、 b、 c， 我们呢希望让这三个元素横向布局，那如何实现呢？哎，咱们首先呢来看下 u 结构，然后呢我们再去看这个样式啊，在 ui 结构里面呢，我们外面是一个包裹性质的大容器，有一个类名是肯听呢一里面呢包含了三个子 vivo， 每个 vivo 里面呢都包含了一个文本，分别是 abc。 然后呢我们需要写样式啊，让他们实现这种横向的 flax 布置 局效果。大家发现啊，这个样式哎，除了标签名字不一样之外呢，其他的和咱们普通的 c s s 哎，都是完全一样的。 首先呢我们先选中里面的这三个子六，给他加一个宽高，然后呢文本让他在居中进行对齐啊，接下来呢，咱们分别通过这个 c 三的选择器啊，选中这一二三这三个子元素，分别加一个背景色。 最后呢哎，我们给这个 cten 呢一这个大容器啊，来一个 flax 布局，然后呢设置在横线上进行分散对齐，就可以实现对应的意外效果。 好清楚了实现的思路之后啊，那么接下来我们打开微信开发者工具啊，咱们去写一下对应的代码。 首先呢我们先找到对应的页面，比如说我们要在这个类似的页面上去实现对应的效果，那咱们可以展开配置，是这个文件夹里面呢，找到类似的对应的这个页面啊，咱们先找到页面的 结构，对应的文件就是类似的点微信 ml。 然后呢我们再找到对应的样式表文件啊，就是类似的点微信 ss。 在第一个这个文件里面呢，咱们去写结构。在第二个里面啊，咱们去写样式，首先呢咱们去写结构啊， 来，在这呢放一个 view， 接下来给他起一个啊， class 类名啊，是 continuer， c， o， n， ti， 恩雅， cantoner。 一里面呢，咱们放三个词， view 来， view 文本呢是 a， 然后呢 ctrl c， ctrl v 啊，咱们复制，第二个呢是 b， 第三个呢是 c。 好，写完这个结构之后呢，咱们可以这样保存。大家看，在页面上就出现了三个文本啊，分别是 abc。 那之前呢，我们介绍过啊，这个 vivo 就相当于是网页里面的 div， 那所以说啊，这个 vivo 默认是站满整个这一行的，那因此啊，这三个 abc 呢，是纵向排列的， 那接下来啊，咱们需要给他去美化样式了，来，首先呢，我们给里面这三个子 vivo 是不是加一个框框高啊，来，咱们选中这个复原素啊， 在这里用类名选择器啊，选中复原所样的空壳，哎，这是后代选择器啊，来一个 view， 来一个宽度，哎，是一百个 px， 这样 来一个高度呢，也是一百个 px。 那然后呢，咱们让这个文本剧中的话呢，还可以来一个 text 杠啊，烂啊，指横向剧中来一个 sont， 再纵向剧中的话，咱们可以来个杭高是不是就行了呀？来，烂 hat 等于一百 px。 好，咱们保存。 那保存之后呢？哎，咱们这个开发者工具啊，会自动进行变异，变异之后呢，我们最新的效果就会给咱们展 试出来。大家发现啊，这个文本好像确实啊有这个剧中的效果，但是呢，为了更明显一些，咱们需要分别为这 abc 对应的 view 去加一个背景颜色。那这时候呢，咱们可以用到 c 三里面的选择器了，那比如说我们可以选中啊 container 里面 view 啊，怎么进行选中呢？咱们可以通过这种冒号 nth 杠 child 来进行选中啊，分别选中第一、 第一个，第二个和第三个对应的 v 来，咱们快速的复制粘贴来，这是第一个，这是第二个，哎，这是第三个，把这个一改成二，哎， 改成三。里面呢，咱们放一个 back ground cola 啊，去设置背景颜色。第一个啊，咱们来一个浅绿色，那就是 light green j r e n 第二个啊，咱们来一个浅蓝色 back ground 杠 cola light 啊， sky blue 好。第三个呢啊，咱们来一个浅粉色啊，来 back ground 杠 color let pink 来选它好保存啊，咱们来看这个 u i 的效果 好，这时候啊，大家发现这三个盒子啊，就有了自己的效果了，都有个背景色，同时呢，文本也是剧中的，但最后一步啊，咱们需要 要让这三个盒子横过来，然后呢分散对齐。那接下来呢，咱们可以给这三个盒子的复元数出来加一个样式啊，来，咱们选中复元素的这个类名，往下翻啊，在这里呢，我们去加一个点代表类名选择器，然后呢，先 display 啊，进行 flax 的 布局，这样的话呢，他就在横向上，他就横过来了。那然后呢，我们需要在横向上进行分散对齐，再加一个样式啊，是 justify content。 然后呢，来一个 space go around 好，咱们保存 好，大家看，这时候我们就完美的实现了这个横向分散布局的效果。 ok， 这一节课啊，咱们给大家去演示了一下如何通过这个 view 组建来实现页面的基础布局。大家在小程序里面 view 组建的时候啊，你就把它当做是普通的 div 来进行使用就行了，只不过呢，标签名不但是 div 了，而是 view。 然后呢，在写样式的时候啊，没有什么太多的顾忌啊，咱们在网页里面怎么写，在小程序里面就可以怎样来写， 那好，这一节课关于 vivo 组建来实现页面的基础布局啊，我们就给大家介绍到这里， 这节课呢，咱们来了解一下斯克肉港 v 组件的基本使用，那比如说，我们希望使用这个组件来实现如图这样的一个纵向滚动的效果，那比如说外面这个红框呢，还是一个有高度的一个容器，然后呢，里面有三个紫元素，分别是 abc。 然后呢，咱们通过鼠标或自己的小手啊，在这里往上拖的话呢，哎，这里面的这三个元素会进行上下的滚动，那么这个效果呀，要实现的话，其实非常的简单啊，咱们总共有 三个步骤啊，咱们可以直接基于刚才的那个效果来进行修改。那第一步呢，我们需要将最外层包裹性质的容器啊，从 vivo 组建给他改造成 sque ro 杠 v 这个组建。然后呢，第二步啊，咱们需要给这个组建加一个属性还是 sque rogue 杠歪啊， 代表说我们允许在纵向上进行滚动，注意啊，如果允许纵向滚动的话，需要加一个四个肉杠歪这么一个属性，如果是横向滚动，那就是四个肉杠哎 x。 那同时啊，咱们为了让他能够实现纵向滚动的效果啊，还必须给这个 sgo 杠 vivo 组建加一个固定的高度，那于是啊，咱们通过这个样式的形式啊，给他加了一个固定的高度，是一百二十个像素，那为了让他更加的清晰啊，咱们又加了一个边框线，同时呢给咱也限定了 一下自己的宽度，好清楚了这个时间的过程之后啊，哎，那么接下来咱们基于刚才的代码去做一下改造，大家来看啊，刚才咱们外面包裹性的容器啊，是一个普通的 view， 里面呢是没有办法实现这种滚动效果的， 接下来我们可以把包裹性质的这个容器啊，从 vivo 改造成 scrow 杠 vo， s c r o r l 杠 vo， 那开始标签修改之后呢，那咱们的结束标签也需要做一下修改， 那同时啊，咱们为了开启这种纵向滚动的效果啊，还需要给他去加一个属性啊，是 s c r o r l skr rogo 啊，代表说我们允许这个组建里面的元素进行纵向的滚动，好保存。那么这个时候啊，哎，大家发现这个效果好像并没有出现， 哎，是不是啊，那接下来啊，咱们还少一些样式啊，因为默认情况下，你如果这么写的话，是没有办法进行滚动的，咱们还需要给外面这个包裹性的容器加一个强制性的高度 才可以啊。来，咱们打开自己的这个样式表，我们就不再进行 flax 布局了，哎，先清空啊，然后呢加一个边框线，咱们先来看下这个啊，外面这个容器啊，他这个宽和高是多少？来一 px， 然后呢， sorry 的来一个 red， 好保存。 打开啊，外面这个包裹性的容器啊，它的高度啊，就是里面这三个盒子的总高度，让它宽度呢是占满了整个横向的区域，那接下来啊，咱们可以限制一下它的宽度来， 宽度呢，给他改成啊，一百个 px， 好保存啊，这时候大家发现这个红色的边光线啊，哎，就 变得只有一百个像素了，但是呢，这个还是没有这个滚动的效果，对吧？那咱们说过，还需要加一个限定的高度，才能够实现纵向的滚动，来，咱们加一个高度 het 啊，来个一百二十 px， 来，咱们保存 好，这时候呢，我们又会自动刷新了，来，看啊，我鼠标放上去，哎，往上拖动，哎，你发现咱们外面这个容器啊，就能够让里面的内容进行滚动了，是不是非常的简单呀，你 注意啊，之前呢，咱们曾经介绍过，在一些电商的移动端项目里面，是不是经常会有一个左侧的滚动列表效果呀，哎， 其实我们就可以基于四个肉杠六这个组件来进行实现，那么实现的过程呢，总共有三步，第一步要把外面包裹性质这个容器啊，改成四个肉杠六这个组件。 第二步，如果是纵向滚动的话，要加一个属性是四个肉杠歪，那如果是横向滚动啊，就是加一个属性是四个肉杠 x， 那只有这两步还不行，咱们还需要给他去限定一个高度，于是呢，我们可以通过样式的形式啊，给他加了一个强制性的高度啊，就代表说我的高度啊只有一百二，然后呢，里面的内容如果超出我的区域了啊，就会在纵向上来进行这种滚动。 好，这一节课啊，咱们给大家去介绍了一下此刻肉杠 view 这个组件的基本使用。第一步呢啊，咱们需要把包裹性的容器改 改，造成 scroll 杠 view。 第二步，加一个 scroll 杠 y 或杠 x 这么一个属性代表说开启纵向或横向的滚动，同时呢，未来能够实现滚动效果，还必须加一个强制性的宽或强制性的高。那如果是横向滚动，就必须 加一个强制性的宽度，那如果是纵向滚动，就必须加一个强制性的高度。好，这一节课呢，我们就给大家介绍到这里。

好，大家好，我是变成小程序，你们说个，我们上页已经教大家怎样去注册一个小程序了，我现在在这跟大家强调一下，有的同学他注册小程序了，他就直接这里面使用一个测试账号去注册个小程序。我这边跟大家说一下，最好不要用测试账号，因为你用测试账号注册的小程序，首先是没有办法发布上限的， 然后我们后面学习别的功能的时候，你测试小程序的话，根本有些功能是用不了的，所以说你一定要跟着我上一节讲的严格的注册一个小程序，你注册小程序可以是个人小程序，也可以是企业小程序， 呃，就怎么说可以，呃，就是一定要注册，就是要用你的身份证，用你的邮箱去注册一个真正的小程序。好吧，你注册完真正的小程序，我这边再带大家看一下我注册完以后的小程序长什么样。看一下我们这面，这其实就是我们一个小程序一个后台，这面后台你看一下，我们看左侧，左侧是有这些功能，什么这这左侧的这些， 然后右侧这些，你注册完以后的话，大家要记得你要去去，你最好是先去设置一下你的小程序的一个名字，你点击这个，点击他，然后点击你这里面如果没有名字的话，他是一个人，应该是一个 什么什么一个一一一串字字母，如果是有名字的，就这个名字，你点一下他，然后这个点进去以后往下点进去，你可以设置你小程序，就是基本设置你可以改，你可以设置名字，也可以修改名字，然后这里面小程序简称啊，小程序头像啊，小程序，这个还小程序简介，然后是微信 证，还有就是这些信息，然后这个服务内幕的话，你就最好也是自己加一下。呃，在我后面教大家的花布上线的时候，会教大家这个服务内幕怎么去添加，添加符合你自己的一个服务类目，然后这些服务标签，然后这些下面这些东西你都是自己去看一下吧，就基本 设置的话就是最好就是你其实最主要的是你的小程序名字，小程序的名字和小程序的介绍，这两个是必须最好设置，还有这个小程序头像，你也要最好设置一下啊，这是我们小程序一个设置，然后设置完，设置小程序，设置小程序设置完以后，我再给大家讲一下别的我们需要的一些东西。首先这个成员官成员刚刚给大家说一下， 那就怎么说呢？如果你的小程序怎么说你是只是自己开发的话，那无所谓，如果你想让别人帮你开发的话，那你这个时候就要你这个项目成员里面你就要点击一下编辑，就添加那个什么，呃，添加， 添加同学，添加，加好友，需要扫码吗？啊？不需要啊，天，就你，你比如说你哪天你的小程序写不好了，你想你要找石头哥帮你写，那你就可以加石头哥， 就这个这个拼音，这个拼音，这个拼音，我看应该是他吧， 点一下，点一下搜索啊，因为我已经把我自己添加过的项目成员，所以说你在这没过两天天就是如果你想跟别人添加开发小权限，让别人帮你开发小程序，你就在这个里面，一定要记住是在这个里面，然后这里面权限给他跟添一下，然后点一下确认添加一个，就在这个里面，我们 点击的什么就这个成员管理成员管理里面，你这个时候就可以在这个项目成员里面去添加，并且你这个添加的话还可以让别人去体验你的条件。还有下面一个体验成员，你说 你小程序没有正式的发布上线的时候，你想让别人去体验你的小程序，你这里面必须得添加这个体验，添加体验成员，呃，这里面一定要记得这里面是添加体验成员，这个里面是添加添加项目的上面的成员其实就是帮你开发小程序的，体验成员就是你的小程序没有上线的时候用来体验你小程序的。好吧，这节先到这里，好，谢大家。