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


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的投票系统显示结果插件
Aug 12 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
js实现鼠标拖动功能
Mar 20 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 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处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
2020/11/03 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
Python编写屏幕截图程序方法
2015/02/18 Python
Python中的XML库4Suite Server的介绍
2015/04/14 Python
分享Python开发中要注意的十个小贴士
2016/08/30 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
Python列表解析配合if else的方法
2018/06/23 Python
Django使用中间键实现csrf认证详解
2019/07/22 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
学生自我评语
2015/01/04 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
结婚幸福感言
2015/08/01 职场文书
车辆挂靠协议书
2016/03/23 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
小学生节约用水倡议书
2019/08/12 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android
python playwright之元素定位示例详解
2022/07/23 Python