全局配置

在app.json中，對小程序進行全局配置。官方文檔

tabBar是對底部/頂部導航欄的配置，圖片的icon 大小限制為40kb，建議尺寸為 81px * 81px

去阿里矢量圖網站，找到圖片，存放到images文件夾中

app.json中的tabBar代碼：

"tabBar": {"list": [{"pagePath": "pages/home/home","text": "主 頁","iconPath": "images/home.png","selectedIconPath": "images/home-red.png"},{"pagePath": "pages/user/user","text": "我 的","iconPath": "images/user.png","selectedIconPath": "images/user-red.png"}]}

?

我的底部導航欄：

swiper滑塊視圖

?通過swiper,制作一個輪播圖。官方文檔

輪播圖位于主頁的頂部，wxml代碼：

<view class='top-swiper'> <swiper autoplay='true' indicator-dots='true' indicator-color='#fff' indicator-active-color='#8CBEF5' circular='true'><swiper-item wx:for="{{banners}}"><image src='{{item.imgUrl}}'></image></swiper-item> </swiper> </view>

?

wxss代碼：

swiper-item image {width: 100%;height: 100%; }

?

圖片寬高都設為100%，相當于拉伸填充；雖然圖片會變形，但無傷大雅。

列表渲染

列表渲染，其實就是for循環。官方文檔

頁面數據是存放在.js文件，里面的Page.data之內。

將data中的數組之內的數據，以for循環的形式傳遞到wxml之中，這是我理解的列表渲染。

通過列表渲染，完成了主頁的中間部分。

wxml代碼：

<view class='navs'> <view class="nav-item" wx:for="{{icons}}"><view><image class='iconPic' src='{{item.imgUrl}}'></image></view><text class='iconTitle'>{{item.name}}</text> </view> </view>

?

wxss代碼：

.navs {display: flex;width: 100%;flex-wrap: wrap;background-color: #fff;margin-bottom: 10px; } .nav-item {width: 25%;padding: 10px;display: inline-block;text-align: center;box-sizing: border-box; } .iconPic {width: 88rpx;height: 88rpx; } .iconTitle {color: #666;font-size: 14px; }

?

主頁的頂部與中部就完成了：

text組件

官方文檔

?

image組件

官方文檔

這里用到了mode屬性中的widthFix，但要在wxss中對圖片的寬度width進行設置。

navigator組件

官方文檔

navigator組件用于頁面的跳轉。

利用navigator組件，編寫主頁底部，并完成底部文章的跳轉頁面。

?wxml代碼：

<view class='article'><view class='article-top'>食物推薦</view><view class='article-item' wx:for="{{article}}"><navigator url='{{item.link}}' open-type='navigate'><image class='articlePic' src='{{item.imgUrl}}' mode='widthFix'></image><view class='articleTitle'>{{item.title}}</view></navigator></view> </view>

?

wxss代碼：

.article {background-color: #fff;padding: 10px; } .article-top {text-align: center;color: rgb(116, 230, 144); } .article-item {padding-bottom: 10px;padding-top: 10px;border-bottom-style: double;border-width: 3px;border-color: #A1A7AD; } .articlePic {width: 100%; } .articleTitle {font-size: 16px;color: #A1A7AD; }

?

?因為兩個跳轉的頁面布局相同，只呈現一個的。

?wxml代碼：

<view><image class='img' src='{{article.imgUrl}}' mode='widthFix'></image> </view><view><view class='title'><view class='title-bottom'>{{article.title}}</view></view><view class='text'><text decode='true'>{{article.content}}</text></view> </view>

?

wxss代碼：

.img {width: 100%; } .title {position: relative;text-align: center;font-size: 26px;color: #8CBEF5;padding: 15px;margin-bottom: 20px; } .title-bottom {padding: 20px; } .title-bottom:after {content: "";position: absolute;left: 50px;top: auto;bottom: 0;right: auto;height: 5px;width: 275px;background-color: #32b66b; } .text {padding: 10px;font-size: 18px;line-height: 1.5; }

?

這里用到了css中的偽類? :after ，來控制邊框的長短。

參考了博客：https://blog.csdn.net/Colossalis_c/article/details/71216339

最終完成后的主頁與跳轉頁：

? ? ? ??

scroll-view可滾動視圖區域

?官方文檔

scroll-x屬性設為true，允許橫向滾動。scroll-left設置橫向滾動條位置。

滾動區域基本編寫完畢。編寫過程中，出現滾動區域無法拖動的問題，待明天解決。

?

轉載于:https://www.cnblogs.com/gangler/p/9404466.html

總結

以上是生活随笔為你收集整理的微信小程序—day02的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。