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


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 相关文章推荐
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 Javascript
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 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基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
transform python环境快速配置方法
2018/09/27 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
汉语言文学毕业生求职信
2013/10/01 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
教师党员个人自我评价
2015/03/04 职场文书
面试通知邮件
2015/04/20 职场文书
社区服务理念口号
2015/12/25 职场文书
运动会主持人开幕词
2016/03/04 职场文书
检讨书范文
2019/04/16 职场文书
导游词之河北白洋淀
2020/01/15 职场文书