小程序模板網(wǎng)

微信小程序?qū)崿F(xiàn)掃一掃,picker和range-key的用法

發(fā)布時間:2018-04-18 09:33 所屬欄目:小程序開發(fā)教程

一:實現(xiàn)掃一掃

分享者:向往藍天的飛魚,來自原文地址 
//index.js

 

				
  1. //獲取應用實例
  2. var app = getApp()
  3. Page({
  4. data: {
  5. show: "",
  6. },
  7.  
  8. onLoad: function () {
  9. console.log('onLoad')
  10. },
  11. click: function () {
  12. var that = this;
  13. var show;
  14. wx.scanCode({
  15. success: (res) => {
  16. this.show = "--result:" + res.result + "--scanType:" + res.scanType + "--charSet:" + res.charSet + "--path:" + res.path;
  17. that.setData({
  18. show: this.show
  19. })
  20. wx.showToast({
  21. title: '成功',
  22. icon: 'success',
  23. duration: 2000
  24. })
  25. },
  26. fail: (res) => {
  27. wx.showToast({
  28. title: '失敗',
  29. icon: 'success',
  30. duration: 2000
  31. })
  32. },
  33. complete: (res) => {
  34. }
 

				
  1. .saoma{
  2. height: 40px;
  3. width:110px;
  4. line-height: 40px;
  5. margin-left: auto;
  6. margin-right: auto;
  7. color: #fff;
  8. background-color: #999;
  9. text-align: center;
  10. }
  11. .show{
  12. width: 100%;
  13. color: #666;
  14. background-color: #fff;
  15. height: auto;
  16.  
  17. }
 

				
  1. <view class="container">
  2. <view class="saoma" bindtap="click">點我掃一掃</view>
  3. <view class="show">{{show}}</view>
  4. </view>

微信小程序,真機測試通過

 

二:picker和range-key的用法

分享者:獨鳴在彼岸,來自原文地址

 

				
  1. <picker bindchange="bindPickerChange" value="{{index}}" range="{{location}}" range-key="{{'name'}}">
  2. <view class="picker">
  3. 地州{{location[index]}}
  4. </view>
  5. </picker>

range-key用于渲染picker的源是數(shù)組的情形,range-key制定了需要picker展示的內(nèi)容。index是系統(tǒng)自動指定的array的下標,不用修改。

對應的數(shù)組內(nèi)容如下:

 

				
  1. [{
  2. "id": "XM4xZnN088X5",
  3. "name": "西雙版納州"
  4. }, {
  5. "id": "yrw6F6n30igs",
  6. "name": "昆明市"
  7. }]

注意range-key中的字段需要單引號指定。



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