|
我来构建第二页面：文章页面。 文章页面主体部分由两部分构成，上半部分是一个轮播图，下半部分是文章列表。 轮播图目前来说已经成为各大电商网站首页的标配元素. 轮播图每隔几秒钟图片会自动更换一张。在小程序中，我们不需要自己编写代码来实现这样的轮播图效果，小程序已经提供了一个现成的组件——swiper。 整个页面,直接构建一个.巴适 现在默认是welcome,得跳转.咋办.你需要一点点的hello world知识哦~ 启动后的页面由app.json里面的东西控制.我们去看看有什么 就这???? 没想到吧,哈哈哈哈哈哈哈哈哈.颠倒一下就可以 成功! 没什么素材.....我有空用ps切几下图...额 这个地方写code 这个图,真tm糟糕 最外层的<view></view>将作为整个页面的容器，在view的内部，我们加入了一个swiper组件。swiper组件主要由多个swiper-item组成，可以定义任意多个swiper-item。 同时，需要注意的是，swiper组件的直接子元素只可以是swiper-item，如果放置其他组件，则会被自动删除。但swiper-item下是可以放置其他组件或者元素的。 混入一个text swiper-item元素仅仅只是一个容器，如果要显示内容，需要在swiper-item容器下再添加元素内容。我们在每个swiper-item内都加入了一个image组件，用来显示UI效果图中的轮播图片，图片路径请根据自己项目的实际情况做出相应的修改。 添加完代码后，保存一下项目看看结果. swiper组件的第一个swiper-item元素图片已经显示出来了。在动手设置swiper组件的样式前，首先在post.wxss文件内，将swiper组件的高度和高度设置好。
好一点吗? 现在它不动啊,让它动!
完全ok,继续 简单介绍一下这3个属性。 · indicator-dots Boolean类型。用来指示是否显示面板指示点（上文提到的3个小圆点就是面板指示点，默认为false。 · autoplay Boolean类型。用来决定是否自动播放，默认为false。 · interval Number类型。用来设置swiper-item的切换时间间隔，默认为5000毫秒。 除了自动切换图片，swiper组件还可以通过拖动图片来进行切换，也可以通过点击面板指示点来切换。 官方在0.11.12210版本中为swiper组件新增了一个circular属性，这个属性可以使轮播图循环滚动。如果circular为false，那么当swiper组件滚动到第三张图片后就无法继续滚动了；但如果增加一个circular为true的属性，则当swiper组件滚动到第三张图片后，会继续向第一张图片滚动，从而形成循环滚动。 swiper组件的属性使用方式都比较简单，更多属性请参考官方API文档。
这里介绍一个文档里没有提到的属性：vertical。
这个属性将指明swiper组件面板指示点的排布方向是水平还是垂直，将vertical="true"，加入到swiper的属性中。 保存后，我们发现swiper组件的面板指示点由原来的水平排布更改为垂直排布，出现在组件的右侧。 那如果把vertical属性改为false呢？形如，vertical="false"。此时，面板指示点如何排列？它依然和vertical="true"时的排列方向一样，呈垂直排布。为什么会出现这样的情况？我们可以把vertical的属性值更改为任何字符串，再看看效果。形如vertical="aaa"、vertical="bbb"等属性值都会让指示面板呈垂直分布。而vertical=" "则呈水平分布。 我们应该可以从上面的属性举例中找出原因了。即使我们将vertical的值设置为false，但这里的false并不是Boolean类型，而是一个字符串。只要不是空字符串，那么在JavaScript里都会认为这是一个true。所以，设置vertical="false"、vertical="aaa"和vertical="bbb"，效果是一样的：vertical属性被认为设置成了true。 如果想让面板指示点水平排列，有以下几种方式： · 不加入vertical属性 · vertical=" " · vertical="{{false}}" 以上几种写法，小程序都会认为你将vertical属性设置成了false。第三种写法，是后面的知识：数据绑定。这种写法，让{{false}}里的false被认为是一个Boolean类型的变量，而不是一个字符串，从而实现false即是假，true即是真的效果。 当然，swiper的vertical属性如果设置错误，一眼就能看出问题来。但如果是其他无法直接在UI上表现的属性出现了真假错误，就不是那么容易排查了，可能会浪费掉我们大量的时间。所有组件的Boolean类型属性都有这样的Boolean陷阱，比如，本例中的indicator-dots和autoplay也存在这个问题。 啊,就先到这里.我去算题了~
|
|
|
