初嘗微信小程序2-Swiper組件、導航欄標題配置

swiper

滑塊視圖容器。

不少網頁的首頁都會有一個滾動的圖片模塊，好比天貓超市首頁，滾動着不少優惠活動的圖片，用來介紹優惠內容，以及供用戶點擊快速跳轉到相應頁面。

Swiper不只能夠滾動圖片，也能夠是文本，以及其餘組件，須要靈活應用。

基本的配置包括：是否顯示面板指示點、指示點顏色，當前選中的指示點顏色、是否自動切換、自動切換時間間隔、是否垂直滾動等。

詳情以下官方文檔：

 

實例：編寫新聞閱讀列表

示意圖：

 

 按照第二篇隨筆：初嘗小程序2-基本框架，中的工程，進行添加內容。

工程目錄結構爲：

新建了一個頁面：post。

在app.json中添加頁面並把新頁面放首頁。

app.json：

 1 {
 2   "pages": [
 3     "pages/posts/post",
 4     "pages/welcome/welcome"
 5   ],
 6 
 7   "window":{
 8     "navigationBarBackgroundColor":"#b3d4db"
 9   }
10 }

 

在post.json中配置新增的這個頁面的導航欄顏色以及標題文字。

post.json：

1 {
2   "navigationBarBackgroundColor": "#405f80",
3   "navigationBarTitleText": "狐妖小紅娘",
4   "navigationBarTextStyle": "white"
5 }

 

在post.wxml中編寫頁面框架和內容

post.wxml：

 1 <view>
 2   <swiper vertical="true" indicator-dots="true" autoplay="true" interval="5000"> 
 3     <swiper-item>
 4       <image src="/images/狐妖小紅娘1.jpg"></image>
 5     </swiper-item>
 6     <swiper-item>
 7       <image src="/images/狐妖小紅娘2.jpg"></image>
 8     </swiper-item>
 9     <swiper-item>
10       <image src="/images/狐妖小紅娘3.jpg"></image>
11     </swiper-item>
12   </swiper> 
13   <view class="post-container">
14     <view class="post-author-date">
15       <image class="post-author" src="/images/頭像1.jpg"></image>
16       <text class="post-date">July 10 2018</text>
17     </view>
18     <text class="post-title">塗山雅雅</text>
19     <image class="post-image" src="/images/狐妖小紅娘雅雅.jpg"></image>
20     <text class="post-content">九尾天狐，亦是妖盟的盟主。塗山雅雅有着強大的寒氣妖力，在姐姐塗山紅紅離開後成爲塗山第一戰力。雖然外表高傲冷漠，但實際上卻很傲嬌。很是仰慕姐姐，視其爲本身的偶像，故而對於弱到毫無妖力的塗山蘇蘇，雅雅對其究竟是不是姐姐而產生懷疑。 </text>
21     <view class="post-like">
22       <image class="post-like-image" src="../../images/icon/chat.png"></image>
23       <text class="post-like-font">999</text>
24       <image class="post-like-image" src="../../images/icon/view.png"></image>
25       <text class="post-like-font">999</text>
26     </view>
27   </view>
28   <view class="post-container">
29     <view class="post-author-date">
30       <image class="post-author" src="/images/頭像2.jpg"></image>
31       <text class="post-date">July 10 2018</text>
32     </view>
33     <text class="post-title">塗山紅紅</text>
34     <image class="post-image" src="/images/狐妖小紅娘紅紅.jpg"></image>
35     <text class="post-content">東狐，在人類妖怪戰力排行榜上位列傳說四皇之一。塗山狐妖之王，亦是妖盟盟主。有溫柔善良一面，也有霸氣冷漠的一面。塗山紅紅有着強大到無與倫比的妖力，令衆妖聞風喪膽，一直都是塗山第一人，深得妹妹塗山雅雅敬佩。
36 幼年時曾經誤殺了本身的救命恩人而一度陷入低潮。在救了東方月初後，心裏有所放開，但由於心結不願接受東方月初的表白。東方月初爲了她的夢想離開塗山五十年，最後因某件變故，塗山紅紅面對本身的心裏，與東方月初在苦情巨樹下許下了來世再見的願望。</text>
37     <view class="post-like">
38       <image class="post-like-image" src="../../images/icon/chat.png"></image>
39       <text class="post-like-font">999</text>
40       <image class="post-like-image" src="../../images/icon/view.png"></image>
41       <text class="post-like-font">999</text>
42     </view>
43   </view>
44 </view>

 

在post.wxss中配置頁面佈局的樣式。

post.wxss：

 1 swiper{
 2   width: 100%;
 3   height: 500rpx
 4 }
 5 
 6 swiper image{
 7   width: 100%;
 8   height: 500rpx
 9 
10 }
11 
12 .post-container{
13   display: flex;
14   flex-direction: column;
15   margin-top: 20rpx;
16   margin-bottom: 40rpx;
17   background-color: #fff;
18   border-bottom: 1px solid #ededed; /*下邊線距離和顏色*/
19   border-top: 1px solid #ededed;    /*上邊線距離和顏色*/
20   padding-bottom: 5px;              /*列邊距*/
21 
22 }
23 
24 .post-author-date{
25   /*margin-top: 10rpx;
26   margin-bottom: 20rpx;
27   margin-left: 10rpx
28   若是margin相關的有不少，能夠簡寫，margin:若後面四個參數，是按照順時針：上右下左的順序
29   若後面有兩個參數，第一個表示上下的值，第二個表示左右的值。*/
30   margin: 10rpx 0 20rpx 10rpx;   
31 
32 }
33 
34 .post-author{
35   width: 60rpx;
36   height: 60rpx;
37   vertical-align: middle;
38 }
39 
40 .post-date{
41   margin-left: 20rpx;
42   vertical-align: middle;
43   margin-bottom: 5px;
44   font-size: 26rpx;
45 }
46 
47 .post-title{
48     font-size: 34rpx;
49     font-weight: 600;
50     color: #333;
51     margin-bottom: 10px;   /*用px是爲了保持間距固定不變，若是用rpx，在不一樣機型上，間距會改變*/
52     margin-left: 10px;     /*控制元素之間水平的間距，建議用rpx，若是是垂直方向建議用px*/
53                            /*若是一行只有一個元素能夠用px，不會形成換行，如有多個元素不行，在小屏幕的機型上可能會換行形成錯亂。*/
54 
55 }
56 
57 .post-image{
58     margin-left: 16px;
59     width: 100%;
60     height: 1000rpx;
61     margin: auto 0;     /*居中*/
62     margin-bottom: 15px;
63 }
64 
65 .post-content{
66     color: #666;
67     font-size: 28rpx;
68     margin-bottom: 20rpx;
69     margin-left: 20rpx;
70     letter-spacing: 2rpx;  /*文本間距*/   
71     line-height: 40rpx;    /*文字行高*/
72 }
73 
74 .post-like{
75   font-size: 13px;
76   flex-direction: row;    /*水平排列方向彈性盒子模型，總體佈局是垂直排列方向彈性盒子，能夠嵌套水平方向模型*/
77   line-height: 16px;
78   margin-left: 10px;
79 
80 }
81 
82 .post-like-image{
83   height: 16px;
84   width: 16px;
85   margin-right: 8px;
86   vertical-align: middle;
87 }
88 
89 .post-like-font{
90   vertical-align: middle;
91   margin-right: 20px;
92 }