Learning notes of wechat applet introduction tutorial - operation feedback of UI chapter

Catalog

1.action-sheet（ Pop up menu at the bottom of the page ）

2.loading（ Loading prompt ）

3.modal（ Pop-up dialog box ）

4.toast（ Small pop-up feedback ）

1.action-sheet（ Pop up menu at the bottom of the page ）

Small instructions ：

• hidden Attribute determines whether the component is hidden or not , The value is ture false
• stay action-sheet-item You can carry parameters , Corresponds to the option value , For example, in the following example  data-content="male"
• All buttons need to be set. Click event change hidden Property value , The dialog does not disappear by itself
• You can get the user's options , For example, in the following example console.log(e.target.dataset.content)

<--!index.wxml-->

<view class="container">
  <button type='primary' bindtap='click'>action-sheet</button>
  <action-sheet hidden="{
   {actionSheetHidden}}" bindchange="actionSheetChange">
    <action-sheet-item data-content="male" bindtap="itemClick"> male </action-sheet-item>
    <action-sheet-item data-content="female" bindtap="itemClick"> Woman </action-sheet-item>
    <action-sheet-cancel> Cancel </action-sheet-cancel>
  </action-sheet>
</view>

//index.js

Page({
  data: {
    actionSheetHidden:true,
  },
  click:function(){
    this.setData({actionSheetHidden:false})
  },
  actionSheetChange:function(){
    this.setData({actionSheetHidden:true})
  },
  itemClick:function(e){
    this.setData({ actionSheetHidden: true })
    console.log(e.target.dataset.content)
  }
})

design sketch ：

2.loading（ Loading prompt ）

Small instructions ：

• hidden Attribute determines whether the component is hidden or not , The value is ture false
• If there is no special setting , The prompt being loaded will continue

<view class="container">
  <button type='primary' bindtap='click'>loading</button>
  <loading hidden="{
   {loadingHidden}}"> Being loaded </loading>
</view>

Page({
  data: {
    loadingHidden:true
  },
  click:function(){
    this.setData({ loadingHidden:false})
    var that=this
    setTimeout(function(){
      that.setData({loadingHidden:true})
    },1500)
  }
})

design sketch ：

3.modal（ Pop-up dialog box ）

Small instructions ：

• The title of the dialog 、 Prompt content 、 determine 、 The cancelled content can be customized . for example confirm-text You can customize the text as Ok, OK , That's all right. ... The default is OK .
• hidden Attribute determines whether the component is hidden or not , The value is ture false
• All buttons need to be set. Click event change hidden Property value , The dialog does not disappear by itself .

<view class="container">
  <button type='primary' bindtap='click'>modal</button>
  <modal title=" Tips " confirm-text=" confirm " cancel-text=" Cancel " hidden="{
   {modalHidden}}" bindconfirm="modalConfirm" bindcancel="modalCancel">
   Are you sure you want to delete ？
  </modal>
</view>

Page({
  data: {
    modalHidden:true
  },
  click:function(){
    this.setData({ modalHidden:false})
  },
  modalConfirm:function(){
    this.setData({ modalHidden: true })
  },
  modalCancel:function(){
    this.setData({ modalHidden: true })
  }
})

4.toast（ Small pop-up feedback ）

Small instructions ：

• duration decision toast Dwell time after ejection
• But only set duration Is not enough , Also need to bindchange Set the click event to toast disappear
• hidden Attribute determines whether the component is hidden or not , The value is ture false

<view class="container">
  <button type='primary' bindtap='click'>toast</button>
  <toast hidden="{
   {toastHidden}}" duration="2000" bindchange="toastChange"> Cancellation successful </toast>
</view>

Page({
  data: {
    modalHidden:true,
    toastHidden:true
  },
  click:function(){
    this.setData({toastHidden:false})
  },
  toastChange:function(){
    this.setData({ toastHidden:true })
  }
})