微信小程序中界面常见的交互反馈、用户即时反馈

骑摩托的蜗牛

于 2022-07-19 21:40:30 发布

阅读量1.8k

点赞数

分类专栏：微信小程序入门文章标签：前端微信小程序小程序微信

本文链接：https://blog.youkuaiyun.com/m0_58859743/article/details/125881555

版权

本文介绍了微信小程序中提升用户体验的交互设计，包括触摸反馈、Toast和模态对话框的使用，以及界面滚动的处理。通过设置hover-class属性实现触摸反馈，利用Toast和模态对话框提供操作成功或失败的提示，并详细讲解了下拉刷新和上拉触底的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用户和小程序上进行交互的时候，某些操作可能比较耗时，我们应该予以及时的反馈以舒缓用户等待的不良情绪。

1 触摸反馈

通常页面会摆放一些button按钮或者view区域，用户触摸按钮之后会触发下一步的操作。这种情况下，我们要对触摸这个行为给予用户一些响应。如图4-17所示，当我们手指触摸了button文字所在的cell区域时，对应的区域底色变成浅灰色，这样用户就可以知道小程序是有及时响应他的这次触摸操作，用户就不会很迷惑。

图4-17 触摸区域底色变成灰色响应用户的触摸操作

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

代码清单4-1 通过hover-class属性改变触摸时的样式

/*page.wxss */

.hover{

  background-color: gray;

}



<!--page.wxml -->

<button hover-class="hover"> 点击button </button>

<view hover-class="hover"> 点击view</view>

对于用户的操作及时响应是非常优秀的体验，有时候在点击button按钮处理更耗时的操作时，我们也会使用button组件的loading属性，在按钮的文字前边出现一个