用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 實戰教程 查看內容

微信小程序開發實戰(16):交互組件

Rolan 2020-8-6 10:14

iOS 程序員一定對 ActionSheet 非常熟悉,這是 Cocoa Touch 很常用的 UI 組件。

1.  動作表單(ActionSheet)

iOS 程序員一定對 ActionSheet 非常熟悉,這是 Cocoa Touch 很常用的 UI 組件。使用 ActionSheet 會從當前窗口底部往上彈出一個窗口,可以在該窗口放置任何組件,例如,如圖 1 所示的一排按鈕。

圖1  ActionSheet的效果

 1 小程序 ActionSheet 的效果,與 iOS ActionSheet 的效果類似。在小程序中使用 ActionSheet 要使用  標簽,該標簽中可以包含任意的組件,因此,可以在 ActionSheet 上放置任何小程序支持的 UI 元素。例如,下面的布局代碼放置了 4 個普通按鈕和一個“取消”按鈕,效果就是圖 1 所示的樣式。

<view style="margin:30px">
  <button type="default" bindtap="actionSheetTap">彈出action sheetbutton>
  <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
    <block wx:for-items="{{actionSheetItems}}">
      <action-sheet-item bindtap="bindItem{{index+1}}">{{item}}action-sheet-item>
    block>
    <action-sheet-cancel>取消action-sheet-cancel>
  action-sheet>
view>

在這段代碼中,使用  動態生成了 4   標簽,這 4 個標簽分別通過 bindtap 屬性指定了 4 個用于響應 item 點擊事件的函數( bindItem1 、 bindItem2 、 bindItem3  bindItem4 )。在循環的外面使用  標簽添加了一個“取消”按鈕,點擊“取消”按鈕,無需加任何 JavaScript 代碼就會關閉 ActionSheet 。

通過  標簽的 hidden 屬性可以控制 ActionSheet 的顯示和隱藏,該屬性值為 true ,表示隱藏 ActionSheet ,為 false ,表示顯示 ActionSheet 。通過 bindchange 屬性指定一個事件函數,當點擊“取消”按鈕或 ActionSheet 外部區域,會調用該函數,通常在該函數中隱藏 ActionSheet 。

下面是完整的 JavaScript 實現代碼。

var items = ['item1', 'item2', 'item3', 'item4']
var pageObject = {
  data: {
    actionSheetHidden: true,
    actionSheetItems: items
  },
  //  用于顯示和隱藏ActionSheet
  actionSheetTap: function (e) {
    this.setData({
      actionSheetHidden: !this.data.actionSheetHidden
    })
  },
  //  點擊“取消”按鈕或ActionSheet的外部區域,會調用該函數
  actionSheetChange: function (e) {
    console.log('actionSheetChange')
    this.setData({
      actionSheetHidden: !this.data.actionSheetHidden
    })
  },
  bindItem1: function (e) {
    console.log("單擊了item1");
    this.setData({
      actionSheetHidden: !this.data.actionSheetHidden
    })
  },
  bindItem2: function (e) {
    console.log("單擊了item2");
    this.setData({
      actionSheetHidden: !this.data.actionSheetHidden
    })
  },
  bindItem3: function (e) {
    console.log("單擊了item3");
    this.setData({
      actionSheetHidden: !this.data.actionSheetHidden
    })
  },
  bindItem4: function (e) {
    console.log("單擊了item4");
    this.setData({
      actionSheetHidden: !this.data.actionSheetHidden
    })
  }
}
Page(pageObject)

顯示 ActionSheet 后,當點擊“取消”按鈕或 ActionSheet 外部區域,會在 Console 中輸出如圖 2 所示的日志信息。然后 ActionSheet 會隱藏(因為 actionSheetHidden 變量被設為 true )。

圖2  點擊“取消”按鈕輸出的日志信息

標簽中可以放置任何組件,例如,下面的布局代碼除了前面的5個按鈕外,還放置了一個標簽。

<view style="margin:30px">
     … …
<image src="http://geekori.cn/img/weixin_code.png"
        style="height:300px;width:300px"/>
  action-sheet>
view>

2  對話框

在小程序中,對話框需要使用  標簽。與 Android 、 iOS 不同的是,這些對話框需要實現擺放在布局文件中,默認是隱藏狀態。例如,下面的布局代碼放置了兩個  標簽,并通過點擊相應的按鈕顯示其中一個對話框。

<view>
  <modal title="標題" confirm-text="確定" cancel-text="取消" hidden="{{modalHidden}}" bindconfirm="modalChange" bindcancel="modalChange">
    這是對話框的內容。modal>
  <modal hidden="{{modalHidden2}}" no-cancel bindconfirm="modalChange2"
bindcancel="modalChange2">
    <view> 沒有標題沒有取消的對話框 view>
    <view> 內容可以插入節點 view>
  modal>
  <view class="btn-area">
    <button type="default" bindtap="modalTap">點擊彈出modalbutton>
    <button type="default" bindtap="modalTap2">點擊彈出modal2button>
  view>
view>

 標簽通過 title 屬性指定標題,通過 confire-text 屬性指定確定按鈕的文本,通過 cancel-text 屬性指定取消按鈕的文本,通過 hidden 屬性控制對話框的隱藏和顯示,通過 bindconfirm 屬性指定點擊確定按鈕要指定的函數,通過 bindcancel 屬性指定點擊取消按鈕要執行的函數。如果指定了 no-cancel 屬性,不會顯示取消按鈕。

現在分別點擊第一個按鈕和第二個按鈕,會顯示如圖 4 和圖 5 所示的對話框。

圖4  帶“確定”和“取消”按鈕的對話框

圖5  不帶“取消”按鈕的對話框

點擊“確定”或“取消”按鈕,會關閉對話框。實際上,這里指的關閉,就是隱藏  標簽,實現的代碼如下:

Page({
  data: {
    modalHidden: true,
    modalHidden2: true
  },
  modalTap: function(e) {
    this.setData({
      modalHidden: false
    })
  },
  modalChange: function(e) {
    this.setData({
      modalHidden: true
    })
  },
  modalTap2: function(e) {
    this.setData({
      modalHidden2: false
    })
  },
  modalChange2: function(e) {
    this.setData({
      modalHidden2: true
    })
  },
})
鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 李寧的極客世界 來自: CSDN
梦幻单人赚钱方法 好彩一预测 十分快三是什么 股权代码查询官网 黑龙江p62中奖号码今天 山西快乐十分一定牛山 江苏11选五任三遗漏 大发快三彩票注册 11月有百家乐连赢奖励的博彩公司 幸运赛车开奖软件 股吧 东方财富网手机版