初尝微信小程序2-Swiper组件、导航栏标题配置

swiper

滑块视图容器。

很多网页的首页都会有一个滚动的图片模块，比如天猫超市首页，滚动着很多优惠活动的图片，用来介绍优惠内容，以及供用户点击快速跳转到相应页面。

Swiper不仅可以滚动图片，也可以是文本，以及其他组件，需要灵活应用。

基本的配置包括：是否显示面板指示点、指示点颜色，当前选中的指示点颜色、是否自动切换、自动切换时间间隔、是否垂直滚动等。

详情如下官方文档：

实例：编写新闻阅读列表

示意图：

按照第二篇随笔：初尝小程序2-基本框架，中的工程，进行添加内容。

工程目录结构为：

新建了一个页面：post。

在app.json中添加页面并把新页面放首页。

app.json：

 {
   "pages": [
     "pages/posts/post",
     "pages/welcome/welcome"
   ],

   "window":{
     "navigationBarBackgroundColor":"#b3d4db"
   }
 }

在post.json中配置新增的这个页面的导航栏颜色以及标题文字。

post.json：

 {
   "navigationBarBackgroundColor": "#405f80",
   "navigationBarTitleText": "狐妖小红娘",
   "navigationBarTextStyle": "white"
 }

在post.wxml中编写页面框架和内容

post.wxml：

 <view>
   <swiper vertical="true" indicator-dots="true" autoplay="true" interval="5000">
     <swiper-item>
       <image src="/images/狐妖小红娘1.jpg"></image>
     </swiper-item>
     <swiper-item>
       <image src="/images/狐妖小红娘2.jpg"></image>
     </swiper-item>
     <swiper-item>
       <image src="/images/狐妖小红娘3.jpg"></image>
     </swiper-item>
   </swiper>
   <view class="post-container">
     <view class="post-author-date">
       <image class="post-author" src="/images/头像1.jpg"></image>
       <text class="post-date">July 10 2018</text>
     </view>
     <text class="post-title">涂山雅雅</text>
     <image class="post-image" src="/images/狐妖小红娘雅雅.jpg"></image>
     <text class="post-content">九尾天狐，亦是妖盟的盟主。涂山雅雅有着强大的寒气妖力，在姐姐涂山红红离开后成为涂山第一战力。虽然外表高傲冷漠，但实际上却很傲娇。非常仰慕姐姐，视其为自己的偶像，故而对于弱到毫无妖力的涂山苏苏，雅雅对其到底是不是姐姐而产生怀疑。 </text>
     <view class="post-like">
       <image class="post-like-image" src="../../images/icon/chat.png"></image>
       <text class="post-like-font">999</text>
       <image class="post-like-image" src="../../images/icon/view.png"></image>
       <text class="post-like-font">999</text>
     </view>
   </view>
   <view class="post-container">
     <view class="post-author-date">
       <image class="post-author" src="/images/头像2.jpg"></image>
       <text class="post-date">July 10 2018</text>
     </view>
     <text class="post-title">涂山红红</text>
     <image class="post-image" src="/images/狐妖小红娘红红.jpg"></image>
     <text class="post-content">东狐，在人类妖怪战力排行榜上位列传说四皇之一。涂山狐妖之王，亦是妖盟盟主。有温柔善良一面，也有霸气冷漠的一面。涂山红红有着强大到无与伦比的妖力，令众妖闻风丧胆，一直都是涂山第一人，深得妹妹涂山雅雅敬佩。
 幼年时曾经误杀了自己的救命恩人而一度陷入低潮。在救了东方月初后，内心有所放开，但因为心结不肯接受东方月初的表白。东方月初为了她的梦想离开涂山五十年，最后因某件变故，涂山红红面对自己的内心，与东方月初在苦情巨树下许下了来世再见的愿望。</text>
     <view class="post-like">
       <image class="post-like-image" src="../../images/icon/chat.png"></image>
       <text class="post-like-font">999</text>
       <image class="post-like-image" src="../../images/icon/view.png"></image>
       <text class="post-like-font">999</text>
     </view>
   </view>
 </view>

在post.wxss中配置页面布局的样式。

post.wxss：

 swiper{
   width: 100%;
   height: 500rpx
 }

 swiper image{
   width: 100%;
   height: 500rpx

 }

 .post-container{
   display: flex;
   flex-direction: column;
   margin-top: 20rpx;
   margin-bottom: 40rpx;
   background-color: #fff;
   border-bottom: 1px solid #ededed; /*下边线距离和颜色*/
   border-top: 1px solid #ededed;    /*上边线距离和颜色*/
   padding-bottom: 5px;              /*列边距*/

 }

 .post-author-date{
   /*margin-top: 10rpx;
   margin-bottom: 20rpx;
   margin-left: 10rpx
   如果margin相关的有很多，可以简写，margin:若后面四个参数，是按照顺时针：上右下左的顺序
   若后面有两个参数，第一个表示上下的值，第二个表示左右的值。*/
   margin: 10rpx 0 20rpx 10rpx;   

 }

 .post-author{
   width: 60rpx;
   height: 60rpx;
   vertical-align: middle;
 }

 .post-date{
   margin-left: 20rpx;
   vertical-align: middle;
   margin-bottom: 5px;
   font-size: 26rpx;
 }

 .post-title{
     font-size: 34rpx;
     font-weight:;
     color: #333;
     margin-bottom: 10px;   /*用px是为了保持间距固定不变，如果用rpx，在不同机型上，间距会改变*/
     margin-left: 10px;     /*控制元素之间水平的间距，建议用rpx，如果是垂直方向建议用px*/
                            /*如果一行只有一个元素可以用px，不会造成换行，若有多个元素不行，在小屏幕的机型上可能会换行造成错乱。*/

 }

 .post-image{
     margin-left: 16px;
     width: 100%;
     height: 1000rpx;
     margin: auto 0;     /*居中*/
     margin-bottom: 15px;
 }

 .post-content{
     color: #666;
     font-size: 28rpx;
     margin-bottom: 20rpx;
     margin-left: 20rpx;
     letter-spacing: 2rpx;  /*文本间距*/
     line-height: 40rpx;    /*文字行高*/
 }

 .post-like{
   font-size: 13px;
   flex-direction: row;    /*水平排列方向弹性盒子模型，整体布局是垂直排列方向弹性盒子，可以嵌套水平方向模型*/
   line-height: 16px;
   margin-left: 10px;

 }

 .post-like-image{
   height: 16px;
   width: 16px;
   margin-right: 8px;
   vertical-align: middle;
 }

 .post-like-font{
   vertical-align: middle;
   margin-right: 20px;
 }