zoukankan      html  css  js  c++  java
  • 界面常见的交互反馈

    触摸反馈

    小程序的view容器组件和button组件提供了hover-class属性,触摸时会往该组件加上对应的class改变组件的样式

    <button hover-class="hover">点击button</button>
    <button hover-class="hover">点击view</button>
    
    .hover{
      background-color: gray;
    }
    

    有时在点击button按钮处理更耗时的操作时,使用button组件的loading属性,在按钮的文字前边出现一个Loading,让用户明确的感觉到,这个操作会比较耗时,需要等待一小段时间。

    <button loading="{{loading}}" bindtap="tap">点击</button>
    

      

    data: {
        loading:false,
    },
    
    tap:function(){
        //把按钮的 loading 状态显示出来
        this.setData({
          loading:true
        })
        //接着做耗时的操作
        /*......*/
    },

    Toast和模态对话框

    在完成某个操作成功之后,我们希望告诉用户这次操作成功并且不打断用户接下来的操作。弹出式提示Toast就是用在这样的场景上,Toast提示默认1.5秒后自动消失

    <button bindtap="tap">发送</button>
    
    
    
    tap:function(){
        wx.showToast({
          title: '已发送',
          icon:'success',
          duration:1500,
        })
      },

    注意,我们不应该把Toast用于错误提示,因为错误提示需要明确告知用户具体原因,因此不适合用这种一闪而过的Toast弹出式提示。一般需要用户明确知晓操作结果状态的话,会使用模态对话框来提示,同时附带下一步操作的指引。

    <button bindtap="tap">删除</button>
    
    
    
     tap:function(){
        wx.showModal({
          title: '',
          content: '是否确认删除',
          success:function(res){
            if(res.confirm){
              console.log('用户点击确定')
            } 
            else if(res.cancel){
              console.log('用户点击取消')
            }
          }
        })
      },
    

    界面滚动

    为了让用户可以快速刷新当前界面的信息,一般在小程序里会通过下拉整个界面这个操作来触发,此时age构造器的onPullDownRefresh回调会被触发,此时开发者重新拉取新数据进行渲染

    //page.json
    
    {"enablePullDownRefresh": true }
    
    
    
    //page.js
    
    Page({
    
      onPullDownRefresh: function() {
    
        // 用户触发了下拉刷新操作
    
        // 拉取新数据重新渲染界面
    
        // wx.stopPullDownRefresh() // 可以停止当前页面的下拉刷新。
    
      }
    
    })

    上拉触底

    //page.json
    
    // 界面的下方距离页面底部距离小于onReachBottomDistance像素时触发onReachBottom回调
    
    {"onReachBottomDistance": 100 }
    
    
    
    //page.js
    
    Page({
    
      onReachBottom: function() {
    
        // 当界面的下方距离页面底部距离小于100像素时触发回调
    
      }
    
    })
    

      

  • 相关阅读:
    密码验证合格程序(Python)
    Python找到所有子集
    Semi-Supervised Classification with Graph Convolutional Networks 阅读笔记
    2018 ICPC南京网络赛 L Magical Girl Haze 题解
    2018 CCPC网络赛 hdu6444 Neko's loop
    2018 CCPC 网络赛 Buy and Resell
    实对称矩阵可对角化证明
    矩阵的极分解证明
    关于欧几里得空间上的仿射变换的直观几何理解
    Codeforces Hello 2018 E题Logical Expression dp+最短路 好题
  • 原文地址:https://www.cnblogs.com/shanlu0000/p/12566413.html
Copyright © 2011-2022 走看看