码迷,mamicode.com
首页 > 微信 > 详细

微信小程序之界面交互反馈

时间:2018-08-21 17:16:31      阅读:280      评论:0      收藏:0      [点我收藏+]

标签:post   收藏   icon   tor   toast   成功   confirm   inf   tco   

交互反馈就是在用户出发某事件之后,给用户一个反馈信息,这要是一个很友好的习惯。

在小程序中是通过一下几种方式实现的:

1.wx.showToast()方法

showToast: function (postscollected, postcollected) {
    wx.setStorageSync("posts_collected", postscollected);
        //跟新数据绑定变量,从而且还图片
        this.setData({
        collected: postcollected
    })
        //这里调用了wx.showToast()方法  
    wx.showToast({
        title: postcollected?"收藏成功":"取消收藏",
        duration:2000,
        icon:"success",
    })
}, 

实现效果如图:

技术分享图片

再次点击收藏按钮:

技术分享图片

2.wx.showModal()方法

showModal: function (postscollected,postcollected){
var that = this
    //这里调用了wx.showModal()方法
wx.showModal({
    title: ‘收藏‘,
    content:postcollected?‘是否收藏该篇内容?‘:‘取消收藏该文章?‘,
    showCancel: "true",
    cancelText: "取消",
    confirmText: "确定",
    success:function(res){
        if(res.confirm){
            wx.setStorageSync("posts_collected", postscollected);
            //跟新数据绑定变量
            that.setData({
                collected: postcollected
            })
        }
    }
})                

不同状态之下点击收藏按钮出现如下效果:

技术分享图片

收藏以后点击按钮:

技术分享图片

原网址:https://blog.csdn.net/qq_40876689/article/details/80034886

微信小程序之界面交互反馈

标签:post   收藏   icon   tor   toast   成功   confirm   inf   tco   

原文地址:https://www.cnblogs.com/Webzhoushifa/p/9512307.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!