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


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 相关文章推荐
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
JS模拟实现哈希表及应用详解
May 04 Javascript
关于vue编译版本引入的问题的解决
Sep 17 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
mysql 搜索之简单应用
2007/04/27 PHP
php下过滤HTML代码的函数
2007/12/10 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
js获取浏览器基本信息大全
2014/11/27 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
vue实现计算器功能
2020/02/22 Javascript
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
python计算N天之后日期的方法
2015/03/31 Python
Python内置模块turtle绘图详解
2017/12/09 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
python如何进行矩阵运算
2020/06/05 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
聚网科技C++面试笔试题
2015/09/01 面试题
广州盈通面试题
2015/12/05 面试题
大学学年自我鉴定
2013/10/28 职场文书
浙大毕业生自荐信
2014/01/26 职场文书
小学英语教学反思案例
2014/02/04 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
大学军训感言800字
2014/02/27 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
租房协议书范本
2014/04/09 职场文书
2014年国庆标语
2014/06/30 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
考研复习计划
2015/01/19 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
奠基仪式致辞
2015/07/30 职场文书
JavaScript流程控制(循环)
2021/12/06 Javascript