這一節(jié)目標(biāo)是實(shí)現(xiàn)底部推薦商品的結(jié)構(gòu)和樣式，由于這里要求橫向滾動(dòng)，所以需要使用上節(jié)介紹的 scroll-view 功能，并使用 scroll-x 屬性支持橫向滾動(dòng)，推薦商品區(qū)域中的每一個(gè)商品是一個(gè)單獨(dú)的 view，每個(gè)view 中需要寫三個(gè)組件：一個(gè) image 渲染圖片，兩個(gè) text 渲染文字；

下面我們打開微信開發(fā)者工具實(shí)現(xiàn)這個(gè)需求，在 index.wxml 中添加下面的代碼：

<view class="good-hot"><scroll-view scroll-x class="scroll-x"><view><view class="good-item"><image src="../../assets/floor/1.png" mode="" /><text>鮮花玫瑰</text><text>66</text></view></view><view><view class="good-item"><image src="../../assets/floor/2.png" mode="" /><text>鮮花玫瑰</text><text>77</text></view></view><view><view class="good-item"><image src="../../assets/floor/3.png" mode="" /><text>鮮花玫瑰</text><text>88</text></view></view><view><view class="good-item"><image src="../../assets/floor/4.png" mode="" /><text>鮮花玫瑰</text><text>99</text></view></view><view><view class="good-item"><image src="../../assets/floor/5.png" mode="" /><text>鮮花玫瑰</text><text>100</text></view></view></scroll-view>
</view>

其主要功能是使用 scroll-x 構(gòu)建一個(gè)橫向滑動(dòng)區(qū)域，使用 view 對(duì)每一個(gè)商品進(jìn)行封裝，每一個(gè)商品由一張 image 圖片和兩段 text 文本組成；對(duì)應(yīng)的圖片資源可以從 gitCode 中下載（圖片源自尚硅谷，非個(gè)人所有，無意冒犯）；

接著在 index.scss 中添加樣式代碼，如下：

.scroll-x {width: 100%;white-space: nowrap;view {display: inline-block;width: 320rpx;height: 420rpx;margin-right: 16rpx;.good-item {display: flex;flex-direction: column;justify-content: space-between;text {&:nth-of-type(1) {font-weight: bold;}}}image {width: 100%;height: 320rpx;}&:last-child {margin-right: 0rpx;}}}
}

css 樣式的具體功能為：

• .scroll-x:
  • width: 100%;: 設(shè)置容器的寬度為100%
  • white-space: nowrap;: 防止子元素?fù)Q行，從而實(shí)現(xiàn)水平滾動(dòng)效果
• view:
  • display: inline-block;: 將每個(gè)視圖設(shè)置為行內(nèi)塊元素，使其在同一行顯示
  • width: 320rpx;: 設(shè)置每個(gè)視圖的寬度為320rpx（假設(shè)這是一個(gè)特定的單位，如在小程序中使用的rpx）
  • height: 420rpx;: 設(shè)置每個(gè)視圖的高度為420rpx
  • margin-right: 16rpx;: 設(shè)置每個(gè)視圖右側(cè)的外邊距為16rpx，增加視圖之間的間距
• .good-item:
  • display: flex;: 使用Flexbox布局
  • flex-direction: column;: 將子元素垂直排列
  • justify-content: space-between;: 在主軸（垂直方向）上均勻分布子元素
• text:
  • &:nth-of-type(1): 選擇第一個(gè)text元素
  • font-weight: bold;: 將第一個(gè)text元素的字體加粗
• image:
  • width: 100%;: 設(shè)置圖片的寬度為100%，即占滿父容器的寬度
  • height: 320rpx;: 設(shè)置圖片的高度為320rpx
• &:last-child:
  • margin-right: 0rpx;: 移除最后一個(gè)視圖右側(cè)的外邊距

最后得到的效果為：

參考視頻：尚硅谷微信小程序開發(fā)教程