小程序模板網(wǎng)

微信小程序小技巧系列《十四》橫向滑動scroll-view隱藏滾動條,調(diào)用現(xiàn)有接口,

發(fā)布時間:2018-02-06 16:39 所屬欄目:小程序開發(fā)教程
小技巧系列為一些有意思的知識點,或者小技巧;你可以在相關文章或搜索內(nèi)搜索“小技巧”的文章(不是帖子)來查看所有本系列文章;
一:橫向滑動scroll-view隱藏滾動條
作者:Pluto,來自授權地址

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)有接口,減少用戶輸入,改善用戶體驗感

本文來自公眾號:TITF,推薦微信小程序愛好者關注此公眾號,是目前比較好的微信小程序公眾號之一;

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)用結束的回調(diào)函數(shù)(接口調(diào)用成功或失敗都會執(zhí)行)

  • 原創(chuàng)示例

    • 代碼區(qū)

 

 

設計指南:巧用接口,減少用戶輸入,降低用戶誤操作率,改善用戶輸入體驗感,提高用戶輸入效率與準確率,優(yōu)化用戶體驗。

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



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/21662.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢