wxml

 <scroll-view class="recommend_scroll_x_box" scroll-x="true">
      <view class="recommend_hot_box" wx:for="{{hotList}}">
        <image src="{{item.pic}}" class="recommend_hot_image"></image>
      </view>
    </scroll-view>

wxss

.recommend_scroll_x_box {
  height: 245rpx;
  white-space: nowrap;
  display: flex;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.recommend_hot_box {
  width: 230rpx;
  height: 245rpx;
  margin-right: 24rpx;
  display: inline-block;
}

.recommend_hot_image {
  width: 230rpx;
  height: 143rpx;
}

js

Page({
  data: {
    hotList: [
      {
        pic: '/images/example2.png',
        title: '玻璃棧道',
        desc: '22W人去過(guò)'
      }, {
        pic: '/images/example2.png',
        title: '玻璃棧道',
        desc: '22W人去過(guò)'
      }, {
        pic: '/images/example2.png',
        title: '玻璃棧道',
        desc: '22W人去過(guò)'
      }, {
        pic: '/images/example2.png',
        title: '玻璃棧道',
        desc: '22W人去過(guò)'
      }, {
        pic: '/images/example2.png',
        title: '玻璃棧道',
        desc: '22W人去過(guò)'
      }
    ]
  }

二：調(diào)用現(xiàn)有接口，減少用戶輸入，改善用戶體驗(yàn)感

本文來(lái)自公眾號(hào)：TITF，推薦微信小程序愛(ài)好者關(guān)注此公眾號(hào)，是目前比較好的微信小程序公眾號(hào)之一；

12月21號(hào)，微信開(kāi)發(fā)工具版本更新，新增微信掃一掃功能，用戶可通過(guò)小程序打開(kāi)微信掃一掃功能掃描二維碼獲取到二維碼上的數(shù)據(jù)

• API名稱：wx.scanCode({})

• API參數(shù)：

  • success：接口調(diào)用成功的回調(diào)函數(shù)，回調(diào)參數(shù)charSet、errMsg、result、scanType

  • fail：接口調(diào)用失敗的回調(diào)函數(shù)

  • complete：接口調(diào)用結(jié)束的回調(diào)函數(shù)（接口調(diào)用成功或失敗都會(huì)執(zhí)行）

• 原創(chuàng)示例

  • 代碼區(qū)

• • 界面布局

設(shè)計(jì)指南：巧用接口，減少用戶輸入，降低用戶誤操作率，改善用戶輸入體驗(yàn)感，提高用戶輸入效率與準(zhǔn)確率，優(yōu)化用戶體驗(yàn)。

受手機(jī)尺寸限制，手機(jī)鍵盤區(qū)域小且密集，易造成用戶輸入選擇性困難與誤操作輸入錯(cuò)誤，同時(shí)用戶在輸入某些特性數(shù)據(jù)時(shí)需要回憶，導(dǎo)致數(shù)據(jù)輸入效率低與影響用戶體驗(yàn)感，因此設(shè)計(jì)小程序頁(yè)面過(guò)程中因盡量減少用戶輸入，利用小程序現(xiàn)有的接口（掃一掃）或一些易于用戶操作的選擇控件（特定數(shù)據(jù)標(biāo)簽）來(lái)改善用戶輸入體驗(yàn)。