【微信小程序】常见界面交互

触摸反馈

<!-- index.wxml -->
<button hover-class="hover" 
    loading="{{isLoading}}"
    bind:tap="handleClick">click me</button>

/* index.wxss */
.hover{
    background-color: lightgoldenrodyellow;
}

// index.js
Page({
    data:{
        isLoading:false
    },
    handleClick:function(){
        this.setData({
            isLoading:true
        });
        setTimeout(function(self){
            console.log("hello world");
            self.setData({
                isLoading:false
            })
        },1500,this);
    }
})

• button
  • hover-class
    字符串，指定按钮按下去的样式
  • loading
    布尔值，true时，名称前带有loading图标
    

Toast提示框

<!-- index.wxml -->
<button hover-class="hover" 
    bind:tap="handleClick">提交</button>

/* index.wxss */
.hover{
    background-color: lightgoldenrodyellow;
}

// index.js
Page({
    handleClick:function(){
        wx.showToast({
            title:"提交成功!",
            icon:"success",
            duration:1500
        })
        
    }
})

• wx.showToast()
  

Modal对话框

<!-- index.wxml -->
<button hover-class="hover" 
    bind:tap="handleClick">修改密码</button>

/* index.wxss */
.hover{
    background-color: lightgoldenrodyellow;
}

// index.js
Page({
    handleClick:function(){
        wx.showModal({
            title:"提示",
            content:"您是否确定要修改密码?",
            confirmText:"确定",
            cancelText:"取消",
            success:function(res){
                if(res.confirm){
                    console.log("确定修改!");
                }else if(res.cancel){
                    console.log("取消修改")
                }
            }
        })
    }
})

• wx.showModal()
  

界面滚动

下拉刷新

<!-- index.wxml -->
<view class="container">
    <text>hello world</text>
</view>

/* index.wxss */
.container{
    display: flex;
    height: 100px;
    background-color: lightgoldenrodyellow;
    justify-content: space-around;
    align-items: center;
}

// index.js
Page({
    onPullDownRefresh:function(){
        console.log("pull down refresh");
    }
})

另外，index.json的内容如下，

{
  "enablePullDownRefresh":true
}

• enablePullDownRefresh:true
  在页面的index.json里配置enablePullDownRefresh为true，开启当前页面的下拉刷新。
• onPullDownRefresh
  下拉页面，微信客户端会给Page实例派发onPullDownRefresh事件。

上拉触底

<!-- index.wxml -->
<view class="container">
    <view class="item">
        <text>hello</text>
    </view>
    <view class="item">
        <text>world</text>
    </view>
</view>

/* index.wxss */
.container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.item{
    height: 450px;
    background-color: lightgoldenrodyellow;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid lightskyblue;
}

// index.js
Page({
    onPullDownRefresh:function(){
        console.log("pull down refresh");
    },
    onReachBottom:function(){
        console.log("reach bottom");
    }
})

另外，index.json的内容如下，

{
  "enablePullDownRefresh":true,
  "onReachBottomDistance":20
}

• onReachBottomDistance:20
• onReachBottom
  在页面的index.json里将onReachBottomDistance设置为20，即当前页面距离页面底部小于20px时，微信小程序会触发Page实例的onReachBottom事件。
  一个典型场景是，购物小程序会在首页展示一个商品列表，用户滚动到底部时，会加载下一页的商品列表渲染到列表的下方，这就是上拉触底。
  

加载提示框

• showLoading()
  显示loading提示框，需要主动调用wx.hideLoading()才能关闭提示框。也就是说，wx.showLoading()应该和wx.hideLoading()配对使用。
  • title
    提示的内容，最多显示7个汉字
  • mask
    是否显示透明蒙层，默认是false。

<!--pages/test/test.wxml-->
<button bindtap="tapHandler">click me</button>
<button bindtap="clickHandler">点击一下</button>

// pages/test/test.js
const timeout = ms => new Promise(resolve => setTimeout(resolve,ms));
Page({
  tapHandler:function(){
    wx.showLoading({
      title:"正在提交您的评价",
      mask:true
    })
    timeout(3000).then(() => {
      wx.hideLoading();
    })
  },
  clickHandler:function(){
    wx.showLoading({
      title:"正在提交..."
    });
    timeout(1000).then(() => {
      wx.hideLoading();
    })
  }
})