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


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 相关文章推荐
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
小程序开发基础之view视图容器
Aug 21 Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 Javascript
vue 授权获取微信openId操作
Nov 13 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 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
PHP检测用户语言的方法
2015/06/15 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
2010/11/16 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
利用Python爬虫给孩子起个好名字
2017/02/14 Python
python re模块的高级用法详解
2018/06/06 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
MySQL面试题
2014/01/12 面试题
一套比较完整的软件测试人员面试题
2012/05/13 面试题
应届生求职信范文
2014/06/30 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书