1. 程式人生 > >微信小程式基礎之互動操作控制元件

微信小程式基礎之互動操作控制元件

好久沒有寫關於微信小程式的文章了,今天簡單的發表一篇,內容比較簡單,包括:ActionSheet上拉選單、AlertAction提示框、SuccessAction完成框、LoadingAction載入框,不做詳細說明,自己研究,不喜勿噴~~

     

  

相關程式碼:

<!--pages/index/Component/ActionSheet/ActionSheet.wxml-->
<view class="viewTitle">
    <text class="view-Name">ActionSheet上拉選單</text>
    <view class="lineView"></view>
</view>
<view class="page">
    <view class="section section_gap">
      <button type="default" bindtap="actionSheetTap">彈出action sheet</button>
      <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
        <block wx:for="{{actionSheetItems}}">
          <action-sheet-item class="item" bindtap="bind{{item}}">{{item}}</action-sheet-item>
        </block>
        <action-sheet-cancel class="cancel">取消</action-sheet-cancel>
      </action-sheet>
    </view>
</view>

<!--pages/index/Component/AlertAction/AlertAction.wxml-->
<view class="viewTitle">
    <text class="view-Name">AlertAction提示框</text>
    <view class="lineView"></view>
</view>
<view class="page">
  <view class="page__bd">
    <modal title="溫馨提示" confirm-text="確定" cancel-text="取消" hidden="{{modalHidden}}" mask bindconfirm="modalChange" bindcancel="modalChange">
      插入你提醒的資訊內容
    </modal>

    <modal class="modal" hidden="{{modalHidden2}}" no-cancel bindconfirm="modalChange2" bindcancel="modalChange2">
      <view> 沒有標題沒有取消的對話方塊 </view>
      <view> 可以自定義提示框 </view>
    </modal>

    <view class="viewName">
      <button type="default" bindtap="modalTap">點選彈出提示框</button>
      </view>
    <view class="viewName">
      <button type="default" bindtap="modalTap2">點選彈出提示框</button>
    </view>
  </view>
</view>

<!--pages/index/Component/LoadingAction/LoadingAction.wxml-->
<view class="viewTitle">
    <text class="view-Name">LoadingAction載入框</text>
    <view class="lineView"></view>
</view>
<view class="page">
      <view class="viewName">
        <loading hidden="{{hidden}}" bindchange="loadingChange">
          載入中...
        </loading>
        <button type="default" bindtap="loadingTap">點選彈出loading</button>
      </view>
</view>

<!--pages/index/Component/SuccessAction/SuccessAction.wxml-->
<view class="viewTitle">
    <text class="view-Name">SuccessAction完成框</text>
    <view class="lineView"></view>
</view>
<view class="page">
      <view class="viewName">
        <toast hidden="{{toast1Hidden}}" bindchange="toast1Change">
          預設
        </toast>
        <button type="default" bindtap="toast1Tap">點選彈出預設完成</button>
      </view>
      <view class="viewName">
        <toast hidden="{{toast2Hidden}}" duration="3000" bindchange="toast2Change">
          自定義消失時間
        </toast>
        <button type="default" bindtap="toast2Tap">點選彈出自定義消失時間的完成</button>
      </view>
</view>