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


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 学习之一 对象访问
Nov 23 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
浅谈jquery事件处理
Apr 24 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
Vue前端开发规范整理(推荐)
Apr 23 Javascript
150行Node.js实现的dns代理工具
Aug 02 Javascript
Vue实现简单的留言板
Oct 23 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 adodb介绍
2009/03/19 PHP
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
[55:02]2014 DOTA2国际邀请赛中国区预选赛 HGT VS Orenda
2014/05/21 DOTA
python使用append合并两个数组的方法
2015/04/28 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
python实现爬山算法的思路详解
2019/04/09 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
django queryset相加和筛选教程
2020/05/18 Python
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
工作建议书范文
2014/05/13 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
《秋思》教学反思
2016/02/23 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技