微信小程序清空输入框信息与实现屏幕往上滚动的示例代码


Posted in Javascript onJune 23, 2020

微信小程序,是属于小程序的一种,英文名为Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。微信小程序也是基于H5,JS的开发。

微信小程序清空输入框信息与实现屏幕往上滚动的示例代码

一. 清空输入框信息(重置输入框信息恢复默认值)

这是我在微信小程序实训开发的过程中出现的问题,多次思考后终于解决了输入框内已发送的消息无法被清空这个问题。从另一个角度说可以把清空输入框信息理解为重置输入框信息恢复初始默认值。以下是我的解决方案,希望对你们有所帮助。

首先,当用户从输入框输入信息后,就会点击发送按钮进行发送信息,然后表单对输入框内发送的消息进行重置恢复初始默认值,方便用户下一条消息的编辑和发送。
具体思路如下:

微信小程序清空输入框信息与实现屏幕往上滚动的示例代码

直接上代码如下:
WXML代码:

<form>
	<view class="form">
		<!--绑定数据-->
		<input class="input" auto-focus placeholder="请输入内容" bindinput="bindInputData" />
		<!--发送信息并初始化值-->
		<button class="button" type="primary" form-type="reset" bindtap="sendMsg">发送</button>
	</view>
</form>

form-type=“reset”,reset属性的作用是重置,可把表单中的元素重置为它们的默认值。
type=“primary”,type属性的作用是用于控制按钮的颜色样式。在微信小程序中,primary属性默认为绿色。
注:form-type="reset"只能应用到form标签当中,view标签中无效,如果去掉form标签,reset将失去作用。

JS代码:

//用户信息
 userInfo:{},
 inputvalue:''
 },
 //绑定数据
bindInputData:function(e){
 this.setData({
 inputvalue:e.detail.value
 });
},
 //发送数据
sendMsg:function(){
 if(this.data.inputvalue == ''){
  wx.showToast({
  title: '消息不能为空~~~',
  duration: 2000
  })
  return ;
 }
 },

关于showToast的详细内容请见wx.showToast(Object object),它的作用是显示消息提示框。

WXSS代码:

.form{/*输入框整体*/
 width: 100vw;
 height: 16vw;
 border-top: 1px solid #aaa;
 background-color: #f1f1f1;
 position: fixed;/*固定定位*/
 bottom: 0;/*底端距离为0*/
 display: flex;
 align-items: center;
 z-index: 20;
}

.input{/*输入框*/
 width: 285px;
 height: 36px;
 background-color: #fff;
 border-radius: 20px;
 margin-left: 1vw;
 padding: 0 10px;/*上下内边距*/
 font-size: 28rpx;
 color: #444;
}

.button{/*发送按钮*/
 width: 70px !important;/*按钮,提升权重*/
 height: 40px;
 padding: 8px 0;
 margin-right: 4px;
}

实现效果:

微信小程序清空输入框信息与实现屏幕往上滚动的示例代码

二. 实现屏幕自动往上滚动

我在做项目的过程中发现用户发送的消息会被信息输入框遮挡,而且还需要手动滑动显示屏幕才能看到用户所发的消息。所以想到以下方法解决这个问题。

实现显示屏幕随着消息的发送自动往上滚动,并且使输入框不会遮挡住所有用户发送的消息。
直接上代码如下:
JS代码:

// 将屏幕往上滚动,将屏幕底端的显示内容显示出来
  wx.pageScrollTo({
   scrollTop: 1000000000,
   duration: 300
  })

关于pageScrollTo的详细内容请见wx.pageScrollTo(Object object),它的作用将页面滚动到目标位置,支持选择器和滚动距离两种方式定位。

如何解决信息输入框遮挡了显示屏幕上的其他用户对话信息内容?
具体思路如下:
在之前的内容里,信息输入框中js代码用position: fixed将信息输入框进行固定定位,bottom: 0将输入框与底端的距离设置为0。所以我们可以在显示屏幕底端又加入一个板块,然后将这个板块隐藏在信息输入框下(信息输入框将板块覆盖,不会影响美观),在js代码里添加板块的高度,写入与信息输入框一样的高度,将显示屏幕顶到信息输入框的上方,就不会出现信息输入框会遮挡显示屏幕内容这个问题。

直接上代码如下:
WXML代码:

<view class="block">
	<text>隐藏块</text>
</view>

WXSS代码:

.block{/*隐藏块*/
 width: 100vw;
 height: 16vw;
 margin-top: 56vw;
 border-top: 1px solid #aaa;
 background-color: #f1f1f1;
}

——>以上内容分别是关于如何解决用户点击发送消息后如何将信息输入框内的数据初始化,恢复默认值和如何将显示屏幕随着用户消息的发送自动往上滚动,输入框不会遮挡显示屏幕上的其他用户对话信息内容这两个问题。在第一个问题里用form里的reset属性解决比较方便,也可以尝试在js里写个function函数将信息输入框里的数据进行初始化。第二个问题里用pageScrollTo方法实现屏幕自动向上滚动和用板块的办法将显示屏幕顶到信息输入框的上方。

总结

到此这篇关于微信小程序清空输入框信息与实现屏幕往上滚动的示例代码的文章就介绍到这了,更多相关微信小程序清空输入框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
js 定位到某个锚点的方法
Nov 19 Javascript
探索Vue高阶组件的使用
Jan 08 Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 Javascript
JavaScript实现九宫格拖拽效果
Jun 28 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 #Javascript
详细分析Node.js 多进程
Jun 22 #Javascript
详细分析vue响应式原理
Jun 22 #Javascript
Vue循环遍历选项赋值到对应控件的实现方法
Jun 22 #Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 #jQuery
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 #Javascript
支付宝小程序实现省市区三级联动
Jun 21 #Javascript
You might like
php 常用字符串函数总结
2008/03/15 PHP
php include的妙用,实现路径加密
2008/07/29 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
python实现员工管理系统
2018/01/11 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
Python运行DLL文件的方法
2020/01/17 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
应聘自荐书
2013/10/08 职场文书
优秀的自荐信要注意哪些
2014/01/03 职场文书
教师党性分析材料
2014/02/04 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
单位租房协议书样本
2014/10/30 职场文书
nginx.conf配置文件结构小结
2022/04/08 Servers