00:00
大家好,这节课呢,我们来写一下首页的这个页面,那页面呢,我们推荐使用啊,这个UU来写,那既然我们引用了这个UU这个组件,那就用它来写好,呃,页面啊。呃,之前给大家演示过页面呢,我们大概是上面是一个这个轮播图对吧,然后轮播图下面是一个呃筛选的条件啊,接下来呢,是呃一个商品的一个列表啊,首先我们把那个播图给准备出来,轮播图我们可以直接在这个u view组件里面找到它的这个呃,Weper啊,那我就不一个一个找了,我就直接搜了。不是这个。有一个weper滑动在上面这个。啊索轮播图啊,这个好好就是这个轮播图,我们直接啊找到它的例子,然后复制一下就可以了。哎,这个就是它的这个例子。找到首页的页面。
01:01
那我们把这些测试的代码就都删掉了,之前我们讲这个服装的时候的一些测试代码。啊,包括上面这里啊,我们在这里来写个轮布图,它需要一个list,就是我们轮布图的一个列表,我们在这里来定义一个list啊,是一个数组,那我们看看它需要什么参数啊,直接可以放这个图片,对吧,放这个图片,那图片呢,我们就啊随便在这。呃,去复制一个图片的地址,因为最后我们肯定要替换成从服务端获取的这个图片地址,所以呢,那我们先随便去啊,拿一个图片的一个地址啊,在这里有一个。里面有一个image,里面有一个地址,我们先用他的,先用它的好。嗯,找到我们的代码。一个呃,按照我感觉啊,他这个名字三,然后应该还有二,所以我就啊,先随便蒙一下,蒙一下二三好,那我来保存看看效果。
02:05
来找到这里啊,哎,是不是有这个轮播图了,对吧,那我们把这个呢给放到第一个啊。把标签放到第一个是方便我们来来回点,因为后面开的标签比较多的话,就不太好找到我们项目,所以我们就是我的习惯,一般是我正正在写的这项目放到第一个后面,我所有的打开的其他的标签页都在后面这样啊叭如说当我写完代码之后回来之后,我不管现在是属于啊哪个里面啊,我都可以直接回到这里,就是之前就关掉了。那轮墨图啊准备完了,那接下来在下面准备一个啊,用于筛选的啊,那为什么要做筛选呢?我们来看一下这个APIAPI找到首页这里有一个API,那可以看到它的查询条件呢,是支持啊这些排序的啊,就是销量的排序啊,推荐的以及最新的啊,那所以呢,我们这里呢,上面也给三个排序,那排序呢,呃,我们就找一个什么呢?啊这个我再放第二个吧。
03:00
啊,这个官网暂时用不到,找一个下拉菜单,下拉菜单来找一个那个never never选选项卡吧,选项卡。啊,找一个选项卡比较心眼不心眼,那就用这个吧。好来复制一下这个啊,复制一下这个。哎,放到它下面啊,它需要什么呢?也是一个list,但这两个list一样,所以呢,我们,哎这里呢,就。呃,给大家写一下吧,这个是我们的这个image啊,就是图片的这个list image list。好,那这个我们是,呃。就是排序的嘛,啊list。啊,那我们再来进行一个sort list,看一下它的这个数据结构啊数据结构呃,有一个name啊,一个name啊,还有一个这个数量的一个下标,就是上面的一个角标,那数量我用不着,我们主要这就是要这个name对吧?啊,也就是它里面是哪个数组里面包含一个对象,然后有个name。
04:00
哎,是这样的啊内幕,那我们有一个是默认排序。默认就是我们,哎,一开始进来的时候那样的一个数据,那我们来复制几个啊,还有一个是销量啊,还有是按推荐排序推荐的商品,再然后就是一个。哎,我来看一下啊这边。记住没记住啊,还有一个最新啊,最新商品,最新商品啊,就是这四个排序。好,我们给到了啊这个。那接着呢,是这是当前的一个啊,所以就是当前处于哪个当前的话,哎,它是用的是这个下标啊,那我们呃,默认的话呢,它就是零啊,所以这个当前我们不给也行,就是默认就让它第一个就可以了啊,所以这个不用给啊好这个是否可以滚动啊,它这个是否滚动呢?是说当你的这个数量过多的时候,是否可以哎在这边滚动。
05:01
哎,就这个东西啊,就是点击是滚动,其实我们就四个的话啊,应该够放,所以这个呢,属性给不给都可以,所以删了也行啊,然后就是一个禁忌,禁忌就是当我们去点击某一个啊。点击某一个选项的时候,它发生改变,我们可以拿到它当前的一个索引啊,那这个呢,对我们的后续的数据的操作是有用的,因为我们比如点了销量的话,我们要去啊,按照销量去排序,肯定要重新请求下数据,对吧,所以呢,这个事件哎是有用的啊,把这个事件给它写上,写在method里面啊呃,清忌salt把这个名字尽量啊大家就是改成哎建明之意。来这个函数啊,那我们这里啊,他应该会接收到一个这个啊current就是当前选中的一个索引,当然这个你要不确定的话呢,你去文档里面看就可以啊,比如说他这个情节啊,是一个index啊,其实也是我们用说的这个索引嘛,那我们直接哎怎么写也行啊,直接这么写吧,Index好,我们来打印一下这个index。
06:04
conso.look index,我来保存看看效果啊,这里就有了啊。哎,销量推荐排序啊,但是我们点了之后他没有切换过去对吧?好,那所以说明我们这个current还是要加上,就是他的这个切换呢,是是靠这个current啊current,那我们还是把它加上吧,啊这个跟我之前使用的别的组件不一样,所以呢,我以为它默认跟这个没有关系啊啊没事,我们把它加上啊current s就当前排序的这个字段啊。好,那一开始呢,我们让它等于哎,零,就是选中第零个,那随着我们点击哪一个呢,我们就把它给设置成哪一个this点啊current sort等于这个index。好,那这个我们就不要了,嗯,还是留着吧,留着,因为后面我们排序可能需要。现在看一下页面啊,点击就正常了,那只不过现在他没有没有居中对吧。
07:04
我们来简单切点样式,它给居中啊,那我们可以给它外层包裹一层VIVO啊,因为有它会占据百分百的这个宽度,然后让它的这个内容居中就可以了啊好,我们来写一下代码啊,给它包裹一层这个V,好给这个VIVO呢一个呃,Tax tax生产,那其实U呢,自己提供了这个样式U-test-center产啊来保存看看效果啊,这时候它就是居中的对吧?啊那如果呃不太清楚的样式呢,建议大家把这个有有它的这个内置样式啊,这个内置样式啊给过过一下,稍微啊,比如说它文字的一些居中啊定位啊,这个之前再给大家在说这个主要时稍微介绍一下,稍微介绍过,那接下来嗯,我们可以看到。呃,它距离这个上面有点近,那所以我们想调整一下间距,但是这个间距呢,你也不用自己写,那我们看它的这个内内置样式,它有一个啊,这个间距啊,有一个间距。比如说另外编剧,那我们可以用这个啊U杠啊marin啊,缩写就是U杠这个M对吧,U-M。
08:08
杠T-X那这个X呢,是这个值啊,值是一到80啊,偶数或者是这个啊,五十十五这样,那我们这个之前给大家说过,所以我们U-M-T就是距离顶部啊,我们给他写个20或者30就行了,写个20先看看效果。哎,是不是间距稍微大点了叭,如说你给它改成30,他可能间距会再大一点,那么给成30吧,啊,那这样完了之后呢。啊,我们再调一下它的这个宽度啊,就是说文字的就是它每个的这个的区域的宽度,以及底部的这个宽度啊,那要不然太窄了不好看对吧,那继续找这个标签页,它的一些属性你可以看到,嗯,有一个。啊,这个滑块啊,滑块就是底下那个蓝色这个滑块的这个宽度,它是RPX,我们把它给设置下。嗯,给个。100。
09:00
先给个100看一看,给个100看一看。啊签就宽了对吧,那接下来要调整这个文字的文字的这个宽度啊,就是这两个文字之间的这个宽度,这个呢,是有一个这个标签的宽度,就是啊item就每一个的这个标签的一个宽度啊好也是,那我们把它给调的也。调成和那个一样吧。啊,不够啊不够,我们把它稍微调大一点,调200。太大了是吧,应该在一百六应该差不多吧,刷新一下哎,这样差不多就好看一点是吧啊。那我们这个就写完了,然后底部就是呃排序的下面是什么呢?就是一个个商品的卡片对吧,商品的card啊,那这个呢,就涉及到这个布局了啊,你如果是呃想要哎,比如说这边一个商品,这边一个商品这种布局的话啊,推荐大家使用,嗯,这个三个布局啊,它内置的这里面也提供了这个三个布局,我们来看看这个布局里面layout布局啊。
10:06
啊,提供了就是类似的一个宫格的这个布局,就是使用这个肉和这个靠啊。那我们随便来复制一个。扶着一个这个吧。来看一下啊,那这个呢是两,就是两个元素之间的这个间距啊间距,然后呃,它的这个SPA呢,就是控制它占的这个区域啊,345就三个嘛,它是用的十二三个,十二三个,如果我们想要商品哎,比如说呃,一半一半显示,那我们就配个六六啊就可以了啊,我们先看看效果。但是信。哦,这里面没有写东西,没有写东西,空的来写个东西啊是吧,哎,大概就是从中间啊一半一半嘛,好,那接下来就开始写我们商品的这个card,想一下我们的商品,我们就简单的写啊,上面是一个图片,下面是一个商品的名称,然后再下面是一个价格以及这个销量。
11:07
行吧,好,那我们来写一下,其实呃,商品呢,我们肯定是最后是编内出来的,所以呢,我们就写一个就可以了啊,那我们啊在这个。呃,里面来写的,但是这些样式呢,我们暂时不需要,暂时不需要。好,那接下来开始写我们商品的这个样式,呃,首先啊商品啊,它是可以点击的,所以在最外层呢,我们给它包裹一个这个,呃,Na GU这个可以点击的啊,但是这个URL呢,暂时没有,没有的话我们先给他写个。呃,先让它跳到哪里呢。啊,先不给了吧,先不给了啊,这个属性我们先不给,等我们有了这个商品的这个详情啊,我们再说啊,那我们只是需要它,然后给它一个class啊,我们这个拉叫肚子叫item,因为我们肯定要对外层的它包裹元素去设置样式,接着写我们的底部啊,那上面是一个图片对吧。
12:02
嗯,图片我们去找一下这个u view的这个图片,直接搜这个卖点M飞机啊,因为你在这边去找的话,是还是没有搜索快要感权,那这个图片呢,使用方法就比较简单,直接在这里啊,它接收一个src属性,就是图片的这个地址,那我们同样的啊,暂时呢,直接先把这个地址写死,暂时我们去找一个商品的一个图片。嗯。商品的这个图片。看一下我们可以用自己的啊,自己的这个数据,那我们。看一下这个首页的这个API,我们来请求一下首页吧。用我们的普班工具。啊,把这个改成index就可以了,就是首页,那为什么请求首页呢?因为首页会给我们返回商品,其实在商品里面呢,就有这个啊,有这个商品的这个图片,我们找一找啊,你看这商品的CAR12就是商品的图片啊,我们就复制这个区块链的。
13:03
由于现在是写页面阶段,所以呢,暂时呢,这些图片啊啊都先给他用啊,真实的这个图片给他替换上,我说的真实是。一定要是符合你现在写的东西,我们写的商城就用用商城的图片对吧,你别搞一些乱七八糟的啊好,那我们先看看效果啊。那我们的这个图片就有了,对吧。啊,那接下来。嗯,我们要对这个图片的这个高度进行调整,因为太大了对吧,那宽度我们就让它百分百吧,那高度呢,啊,高度也先这样吧,啊我们。这个最外层,比如说它贴的近的话,那到时候我们去调整一下它最外层的这个这个元素就可以了,先这样,那我们先把底部的这个名字也写出来。好,图片完了之后,嗯,来写一下啊,这个商品的这个名字。啊,我们说这个是区块链,区块链好名字写完之后呢,我们来写底下的一个价格和一个。
14:03
这个销量啊,那因为底下呢有两个对吧,有两个就左边显示价,右右边显示这个销量,所以呢,哎,我们用一个,哎,我又给它包裹,那包裹之后呢,这里就是我们的这个价格,我有啊,比如说啊人民币,找一个人民币的符号好。比如99999元啊,再来一个呢,是啊销量啊。嗯,销量,比如说这个十人购买对吧,多少人购买。或者说干脆直接就是销量啊,冒号留给你也行啊,销量好,那我们来看看效果。啊,大概是这样的啊,因为这个VIVO它会独占一行,所以呢,呃,我们如果想要让它左右排开的话,在移动端推进推荐使用莱克斯布局啊,所以这也是为什么我在外外面给它包裹一层这个的原因啊,那布局呢,我们不用自己去写这个样式啊。啊,之前说过u view已经提供了,所以我们使用这个啊,U-flagx啊U-Lex呃,再然后呢,我们想到它左右啊,左右就是排开那有一个U杠啊柔有杠肉,柔是控制这个啊,就水平方向的嘛吧,然后。
15:17
排列的方式是什么呢?是between b dtw,好,这时候我们再来看一下效果,这些样式都可以去刚才给大家说的。啊,说到这个里面去看啊,荔枝羊水里面去看。之前给大家讲过了,这个我们就不说了,呃,可以看到现在已经左右排开了,对吧?啊,那接下来其实我们的布局已经算是完成了啊,接下来就是微调,比如说调整一下这个元素之间的这个这个元素的内间距啊啊,然后呃,元素距离顶部的一个间距,以及这个字体的颜色对吧?标题的这个加粗什么的啊,所以呢,我们一个一个来写啊。先来给最外层的这个card。我们来找一找这个裤子card,先给他写一些样式,让它距离,哎,上面有一些啊,这个间距啊,以及内部呢,有一些盘点来,我们在这个那暂时GS我们用不到,先把它折叠啊,我们在这个里面去写,在这个style里面去写这个第二固字item,那固s item的这个样式啊呃,主要是就是给他一个判定就可以了,其实判定让它呃上下左右40RPS。
16:26
好,接着呢,哎,我们保存看看效果嘛,哎,可以看到这个效果就好很多了,对吧,那接下来调整这个标题,标题呢,我们再给它一个啊class好,那这个克拉呢,我们就叫开。啊,因为这个用的是SS,所以我们可以直接在这里面去写这个title,我没有复制上啊,没无所谓,我们这手写啊,第2TITLE t Le啊嗯,Title,呃,距离顶部。呃,有一些间距吧啊20RPX啊,再来后呢啊,我们可以给它稍微加粗一点啊杠500字号呢可以稍微。
17:06
大一点啊,大一点。哎,比如说哎,默认是,呃,我们来看看默认的这个字号是多少啊,字号是多少,那得先把那个注释表,要不然汇报错。啊加粗了一点,呃,默认呢是这个14啊14,那所以我们给它调成啊稍微大一点吧,就是32吧,20X32就是1066PX嘛,好保存来看效果好,稍微大一了点对吧?好,接下来啊,我们来写什么呢?写这个。呃,价格这一块吧,价格这一块,那价格呢,其实上它跟它之间也有一些间距,所以呢,我们啊,干脆让这个抬头距离顶部和和下部都一样,那我们就简写它这么去写,那左右呢是零就不管了。好,你看这个就是标题,它距离就把下面的间距给拉开了,对吧。
18:00
哎,有点大是吧,这个十大。这样就行了,那接下来给这个价格来写一个样式,Class加二。Class等于啊这个。六那我们来写这个价格。啊,继续啊,他和这个。抬头是啊,平级的,因为我们最外层的这个包裹元素没有写,没有写,所以我们就直接写到这个title头下面,对啊,这里给个颜色啊,红色就可以了,销量的话啊,Sales啊,给个颜色稍微淡一点吧,稍微就是别比黑色那么黑。这个888,那我们来再看看啊,现在哎,大概这个就是我们的这个样式对吧,好写的就是比较简单啊,比较简单啊,因为我们的主要重点应该放在学习的一个unit APP上。
19:02
那关于页面呢,我也会,就是只是给大家写一个,在后续我们的其他的功能中,页面我都会提前准备好,然后就直接复制了,然后。就不再就是费时间给大家写页面了啊呃,那我们写完之后呢,再给大家说一个小技巧,你需要很多这个商品,是不是你不要去啊,一个一个的去复制这东西啊,一个个去复制这东西啊嗯,你直接可以写个循环啊,循环它最外层的看就可以了,那首先我们来看一下代码,精简一下这个view没有用了,没有用了,因为我们最外层的包裹用这个na na g就可以了,那我们循环谁呢?注意你不要循环这个na g啊,你循环这个,因为我们用的是这个啊,三个都是布局对吧?啊循环它,所以呢,我们给它来写一个循环we-for啊循环呢,你也不用先去准备数据,因为现在开页面开发阶段,你可以直接啊随便写一个数量,比如说我们循环啊12个啊,按因12,它就会循环12字,那现在我们来看看我们选后的一个效果。是不是就有了对吧。
20:02
嗯。啊。呃,如果感觉不太好看的话呢,我们可以给它再加一些啊,加一些个阴影啊,Box shadow。第一个我们给乘零啊,第二个哎,给个12PX,给个12个啊,第二个第三个呢,给个20PX这个补丁,然后颜色我们用rgba啊,因为rgba的话,我们可以控制它的这个透明度啊,那颜色呢就用黑色就可以了,因为我们可以通过。这个透明度啊,来,比如说0.1的这个透明度,来控制这个颜色,然后稍微淡一点,那么来保存它的效果。啊,稍新啊,这样就有了一个阴影,稍微看的好看一点,但是我们的这个元素好像都挨着呢,对吧,你看通过我们这个啊,出发的时候,那我们再给他一个啊marketin top,就是item这里这个in top。
21:06
三十三十。啊,这样的话,元素之间稍微有点间距啊,那我们的这个页面就写完了啊,写的比较简单,就简单的写一些样式,然后更多的去使用的是这个u view的一些样式,以及它的这个布局的一些组件,以及它的一些组件啊,其实像这些这个判定啊,以及这个top啊,啊我们也可以啊在这里面啊,就是直接用这个u view提供的class也可以了。好,那这节课我们就到这里。
我来说两句