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人去過'
      }, {
        pic: '/images/example2.png',
        title: '玻璃棧道',
        desc: '22W人去過'
      }, {
        pic: '/images/example2.png',
        title: '玻璃棧道',
        desc: '22W人去過'
      }, {
        pic: '/images/example2.png',
        title: '玻璃棧道',
        desc: '22W人去過'
      }, {
        pic: '/images/example2.png',
        title: '玻璃棧道',
        desc: '22W人去過'
      }
    ]
  }

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

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

12月21號，微信開發(fā)工具版本更新，新增微信掃一掃功能，用戶可通過小程序打開微信掃一掃功能掃描二維碼獲取到二維碼上的數(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ì)小程序頁面過程中因盡量減少用戶輸入，利用小程序現(xiàn)有的接口（掃一掃）或一些易于用戶操作的選擇控件（特定數(shù)據(jù)標(biāo)簽）來改善用戶輸入體驗(yàn)。