12. 尚硅谷_微信小程序_swiper组件使用.avi原创

好，来，咱们接着上课，那么这节课呢，我们要，呃，其实咱们主页的内容呢，已经整完了，那么接下来我们要实现的是点击这个按钮，我们要跳转到另外一个页面，跳转到另外一个页面，那么首先要整，要跳转到另外一个页面，你是不是要先得有一个页面啊，所以呢，我再在这个配置下边，我呢先去创建一个目录啊，创建目录我叫它叫list啊，表示是列表，那这个时候呢，我在这个下边，我就也创建一个list，那这样的话，它这个结构是不是出来了，好，现在我再强调一点，你会发现这边这个配里边是不是也把这个路径写入了。嗯，OK，这第一点第二点大家可以看一下啊，我之前这有一个路径，它是不是自动找的第一个页面啊，那如果说啊，看着我把这两个数据换一下，我CTRLS保存。

哎，现在显示的是不是第二个页面是类似页面啊，那现在大家能不能总结一下，他小程序里面上来如何去初始化显示页面，它是取PH这个数组下标为零的那个路径对应的页面，能懂吧？OK，这是第一点，那我还原一下。那第二点，其实我特别希望有同学问我，我再说，但是大家还没问这个，可能是没有意识到，我说一个问题啊，上午咱们这个结构、样式、行为是不是都写了，但是有没有发现一个问题啊，这是我的结构，这是我的样式，可是我在结构里面根本没有引入样式。哎，有同学想到了是吧，根本没有引入样式，那你有没有发现我的样式就生效了呢？它是怎么做的呢？有没有发现它默认生成的四个文件的文件名一模一样，那假如说我把它的样式名。

这个文件名我去换一个。还有吗？这是不是就没有样式了，就是说他是怎么去设计的，他会在他当前这个结构目录下去找对应的样式文件，而且他直接找的是什么，是不是那个同名的文件啊，这个大家要知道啊，这个大家要知道。哎，能想到这点同学们特别好，好那咱们来整第二个页面，那首先我们要实现一个需求，就是点击这个button的时候去跳转，就点击下面这个按钮，那我们找到对应的结构，其实下边这我们整的时候，咱是不是给了个vir。

给了个容器，OK，还记不记得上午咱们在测的时候，我这写了两个测试的方法，那其实现在跳转的时候就不需要写两个了，我直接在这儿就写这一个吧，我换个名字，我们叫他呢handler可以个吧，哎，处理点击事件。OK，那这个方法呢，对应的在GS文件，我就要去换一个东西。这两。这两个还有用吗？没有饿了吧？OK，那我们把这个拿过来。好方法写好了以后，现在我们要实现的是，哎，点击跳跳转到list页面，现在我是不是又想要一个功能啊，就是你点击让它去自动跳转到指定的页面，那你说我去哪找。我现在想要实现一个功能，也就我得需要他帮我去实现吧，你说找什么，找框架组件还是API很好，API你能快速的区分出来这个东西啊，有助于你们这个提高你们的这个开发速度啊，那在这个里边，首先我要跳转的什么界面啊。

界面这儿点开往下看，往下看这有个东西叫导航来，其中第一个方法就叫注意啊，它是微信对象的方法，不要写混了，那这个方法呢，叫navigate to navigate是不是导航的意思。啊，里面传一个配置对象，注意看下面这句话。保留当前页面，跳转到应用内的某个页面，我们先看这一句就够了。嗯，往下看它的参数。有四个，第一个URL，这不用说了。

肯定是你要跳转页面的路径吧，哎，有没有发现下面这三个，不管在哪个方法里面都有。成功失败，还有一个成功或失败都会调用的，哎，那我们来写一下，首先呢，把这个东西我们可以拎过来。呃，来到我们对应的项目，那那肯定是放到这了，里面是不是传一个对象，首先需要一个参数URL没问题，那这个URL这你肯定要写对应页面的路径，我们要不让它跳转到哪呢。注意这个路径，你通常写的跟这个一样，行，是不是要跳转到这个页面，对的吧，好拿过来来，待会呢，其实我们能发现一些小问题来，我呢先把这个。这是一个地址吗？那成功或失败那些我可以不用写的，我不用它就不用写，来我CTRLS保存一下。

打开调试器，我点击一下就发现他报错了。大家看看能不能理解这个为啥会这样。是路径肯定不对了，注意看他报错的路径是什么，Page index下边它是不是自动帮我加了一层这个。我的本意什么？从根目录下去跳转，而它是不是相当于是从当前页面去跳转？所以我们应该在前边去加一个图形。跟不进啊，那这个时候我再去CTRLS保存一下来。走。等一下，这也太卡了，这不出来了吗？啊，出来了，现在已经跳转成功了，来回头再看一下他官网，官网说的这句话，保留当前页面，那这是什么意思。

哎，对，是他之前的页面是不是还在，我点击这个，注意这个东西不是咱家的，它自动是不是就有我一点，是不是能后退啊。啊，这是保留当前页面，那么对应的其实还有一个方法叫这direct，那这是什么意思呢？从定下往下看。关闭当前页面，他说保留了吗？没有没有了，那我们其他的不需要动，我现在呢，就把这个方法呢，我们换上去，我换成direct走。好，我点击跳转走。大家看页面跳转了，但是那个回退的按钮是不是没有了啊，那这样呢，其实我们也能区分它俩的作用，那就是看我们实际的需求，我需不需要回退。OK，那现在我们已经跳转成功了，那我还是给他还原一下吧，我们用那个na。

嗯，没问题，那接下来我们重点要写的就是这个第页面啊，要写之前呢，那我先演示一个东西。你每次去修改一点内容的时候，一旦你去CTRLS1保存，它是不是重新编译啊，但是每次上来是不给你加载的是主页面。对的吧。加载成主页面，那样的话，如果说我修改是list的样式的话，我我每次是不是都得点击跳转一次啊，比较麻烦。我们现在主页面是不是已经开发完了，那其实先可以把它跳过，怎么做呢？你把这个提到前面去，那那这个时候每次就算你CTRLS上来，是不就是例子的这个页面，OK，好，这个东西有了，我们接下来来看一下在这个里边啊都有哪些内容。

首先上来，哎，我这电脑突然。卡了一下有点不高兴，可能让他去跳转一下。大家看上来，这上边这是一个轮波图对吧？嗯，那么在再往下注意看这是一个列表了，列表。那么在这个列表这，你细心的同学可能会发现，我下边的结构其实一模一样。这是一个结构啊，再往下翻呢，就是数据不一样，结构是一样的，那现在我问大家一个问题，你觉得这些东西是我写死的。能想到什么，最起码这么多个体，是不是应该是便利出来才对啊，啊这第一点，那知道这个以后，我们先去做一个这个最基本的，先把这个搞定。

先把这个搞定。好，那现在这个窗口的背景颜色。是这种，而不是我们现在这个，这个是不用人家全局的那个。而之后的所有页面是不是都是这个颜色，上午其实给大家演示过对的吧，那也就是说我全局的颜色应该是这个才对。懂我的意思吗？而主页面就上来第一个页面，这个是不是应该是他单独的一个颜色。OK，那现在我们来跳转一下，我去把这个颜色来吸一下。是他那首先这个颜色我应该放到哪了。放到全局的配置吧。嗯，是不是在这儿。没问题，放过来，然后后边这个颜色我应该拿走，你说我应该拿到哪。

我应该单独给了谁啊？主页面index的页面吧，那配置呢，就在这儿，哎，在这的配置怎么写，注意在这呢啊，我先把这个颜色放到这啊，在这儿的配置就不需要像全局写这么麻烦了，你只需要写找对应的选项，就是要设置这个导航的那个背景颜色嘛，窗口的全屏。把这个拿走，就是不需要写外边的一层window了，我们直接来到index接来把这个拿过来，所以我刚刚留这个颜色是因为我是不是要拿它。把这个替换掉呀。那那这个时候CTRLS保存。注意看当前的这个list页面是不是用全局的那个没有问题啊，我们来测一把，我把这个list还原一下，放到index的下边con保存一下，大家看。

主页面是不是还是用他自己那个颜色。嗯，而我的绿色已经用全局的这个颜色。没有问题啊，那这个时候呢，我还是把这儿还原，OK，那还有一个配置啊，注意看这个文字。这个是不是也是用人在全局的不爱硅谷啊，我们现在是不是想用自己的？粘贴一份，你说这个应该给谁变成。是不给还是应带什么，这是哪个页面啊list，所以呢，我得找到list页面的基配置文件来过来。那这个时候这个文字我就可以不用它啊，在这呢，我叫它硅谷周刊。换RS保存，我们来看一下这个是不是已经画上去了，包括那个字体颜色，你觉得。

找到list来，你觉得黑色不好看，那其实也只能是换换个啥啥颜色了啊。哎，这个好像还好一点。OK，那这样的话，这个窗口的啊，这些设置我们就配好了，接下来我们去写这个页面的内容，首先最上边它是一个。轮播图对吧，OK，那来到官网上，我们到组件这一块。组建。是他卡了，OK来组件这一块我们找一个东西叫per，你们看到这个应该熟悉啊，那在VIVO里边它滑屏组件对吧，包括大家应该是还用过一个叫better。这两个都用过吧，啊，那这个weer它专门是去做龙波图的。

嗯，那怎么去写呢，我直接在那写。来这我把这些干扰呢全部关了，来到我们list的结构，这那这样的话，这个我们就不要把它撤掉上来，我先整一个容器，OK，那首先你用sample的话啊，写一个Apple是最外面的sample里面的每一项要求必须是它。应该也好理解item item是不是它里面的一个个体呀，啊，那这个里面你说我应该放什么。其实一个swa item对应的就是当前这一个页面，而里边我是不是只需要放图片就可以，哎，那所以我们可以在这去整一个image，那接下来呢，我们来个诶。二没问题，然后呢，我去引一下image，我们先写写死他image下面的那个找一下。

这个，呃，Detail下边还有个叫carous，是轮播的意思，那接下来零一.jpg。没问题，CTRLS保存一下，这不出来一张吗？那么因为它有四张复制，复制这不四份吗？四份的话我们把图片换一下123。4OK ctrl s保存。拢过图就好了，看着虽然说看着有点low，但是它的能已经实现了，功能已经实现了，那其实接下来我们要做的就是样式问题。对吧，那首先要设置样式，我们是要给外per下的这位置设来找到我list子对应样式的文件，那其实我可以这样，呃，SWSO，那么它呢，首先有个宽度应该是100%，这个大家能理解吧，好，高度的话大概是400RPS，那也就是说它转换为CSS对应是不是200个像素。

嗯，然后我们要做的是让它下边的图片都是比宽高100%，是不是就可以，这不下边你妹吗，你把这个百分百高度百分百CTRLS，这应该是个分号。这不就好了吗？那接下来我们还差什么呢？对，下面是不是有个导航这个小圆点，并且你会发现小圆点是不是有样式啊，有颜色吗？OK，那这些东西想都不用想，你外都是用它的，去它上面去找属性。

来，我们看第一个属性是否显示面板指示点，面板指的就是那个界面。默认值为false，就是默认不显示，那其实我可以直接把这个拎过来就OK。注意这是谁的属性per，你别加错地方了啊，之前有同学犯错误加给谁了，加给这个H不管用，你应该是给了这个S，那它既然它是一个属性，那我就放到这，其实这样应该就好了，我一刷新。这不就出来了吗？哎，这样写和这样写是一模一样的，懂吗？哎，那既然能少写点代码，为什么不少写点呢？OK，那这第一个，然后这个点有点丑怎么办？再找那指是点呢？颜色来，我们直接给他拿过来，OK，那在这呢，来个什么颜色？Pink得是高亮那个，来个这个吧，Yellow green。

其实我是喜欢绿色，但自从长大了以后，懂得了绿色的含义，有很多我就不敢跟别人说，我去，我喜欢绿色。11，我真的觉得绿色能让人放松心情。来吧，我们继续往下，那这个就不用我说了吧，当前选中的指示点的颜色。来把这个拿过来，那这个时候呢，来吧。就这样吧，小清新风格好，那这个龙窝头就搞定了，嗯，东西呢倒是不难，OK，我呢先把这个视频大家听一下。