這次讓我們來看看界面是怎么布局的吧！

比如打開模擬器里“我的”頁面，找到其所對應的me文件夾里的文件

打開me.wxml

查看第一段代碼，發現其中包含五個view類，他們的屬性標簽分別是：class='amountBg'、class='img'、class='account'、class='nick-name'、class='address'，

對應著背景、頭像、賬號、昵稱、地址五個方面。他們之間的包含關系也不難看出。

View是一個視圖容器，它可以展示一些內容，我們通過對他的屬性進行標記來區分，并通過對應的wxss文件修改其樣式。

比如對于第一個view類amountBg，我么打開me.wxss文件，看到第一段代碼

wxss是按照css的格式來的，代碼的編寫標準可以參考這個：http://css.cuishifeng.cn/index.html。

遇到不懂的可以在里面查，比較方便。大概說一下上面這段的意思：

display: flex——設置為彈性伸縮

flex-direction: row——橫向從左到右排列

height: 100px——高度為100px，px是尺寸單位

background-color: #5495e6——背景顏色，具體顏色代碼我在第一篇里說了網址，也可以百度搜，這里再給一個http://cha.buyiju.com/tool/color.html。

align-items: center——彈性盒子元素在該行的縱軸上居中放置。

遇到其他不懂的去查代碼標準的那個網址就是了。

在第二個view類img中我們可以看到其中包含了一個叫open-data的類。

Open-data是一個開放的框架，它可以直接顯示用戶的基礎數據而不用經過用戶授權，常用在不需要把用戶數據傳到后臺數據庫的時候。

它使用type來表示不同的含義：

zh_CN是簡體中文的意思。

具體文檔在這里：https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html

第一部分看完了，來看一下第二部分

重點說一下收藏列表的實現：

這里新出現了兩個東西，bindtap屬性和image類

這個bindtap表示當用戶點擊時，觸發onCollectClick事件，而這個事件在me.js里定義了，我們看一下：

發現是一個跳轉到新頁面的功能。me.js是小程序的邏輯關系，下次再說。

Image類是展示圖片的方法，其中src表示要展示圖片的相對路徑。

"./" 代表當前文件夾。

“../”表示當前文件夾的上一級目錄，即pages。

“../../“表示”再向上一層，即miniprogram文件夾。

還有一種叫絕對路徑，比如C:WindowsSystem32，但一般不用。

這里看到image類還有一個style屬性來規定圖片大小，其實就是修改樣式，和wxss的功能一樣。

只不過為了省事，有時候直接在wxml里寫了，你也可以給這個image定一個“class = tupian “這種，然后在wxss里編寫tupian這個class的樣式，最后是一樣的效果。

先說這么多，是不是有點啰嗦哈哈哈，下次再說js文件。

總結

以上是生活随笔為你收集整理的小程序新闻列表页面布局代码_论坛小程序·“我的”页面布局的全部內容，希望文章能夠幫你解決所遇到的問題。

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