Ausführliche Erläuterung von Beispielen für von WeChat entwickelte Eingabesteuerungen-WeChat-Entwicklung-php.cn

In diesem Artikel werden hauptsächlich die relevanten Informationen zum WeChat-Applet-Eingabefeld Steuerung ausführliche Erklärung und Beispiele (verschiedene Beispiele) vorgestellt. Das Eingabefeld ist das am häufigsten verwendete Eingabefeld im Programm: Anmelden, Registrieren, Abrufen Suchen Sie nach dem Inhalt im -Feld usw. Freunde, die ihn benötigen, können sich auf die

WeChat-Applet-Eingabefeldsteuerung

Die wichtigsten Details des heutigen Tages beziehen Werfen wir einen Blick auf das Eingabefeld-Steuerelement im WeChat-Applet. Das Eingabefeld ist das häufigste im Programm. Es wird zum Anmelden, Registrieren, Abrufen des Inhalts im Suchfeld usw. benötigt Außerdem müssen Sie verschiedene Arten von Eingabefeldern einrichten. Der heutige Code muss entsprechend verwendet werden. Erstens wird der Anmeldestil einfach auf der Hauptseite angezeigt und verwendet.

Der Code lautet wie folgt:

用户名： 密 码： 登录 清除 {{infoMess}} {{userName}} {{passWd}} 各类型输入框展示 Nach dem Login kopieren //index.js

//获取应用实例 var app = getApp() Page({ data: { infoMess: '', userName: '', userN:'', passWd: '', passW:'' }, //用户名和密码输入框事件 userNameInput:function(e){ this.setData({ userN:e.detail.value }) }, passWdInput:function(e){ this.setData({ passW:e.detail.value }) }, //登录按钮点击事件，调用参数要用：this.data.参数； //设置参数值，要使用this.setData({}）方法 loginBtnClick:function(){ if(this.data.userN.length == 0 || this.data.passW.length == 0){ this.setData({ infoMess:'温馨提示：用户名和密码不能为空！', }) }else{ this.setData({ infoMess:'', userName:'用户名：'+this.data.userN, passWd:'密码：'+this.data.passW }) } }, //重置按钮点击事件 resetBtnClick:function(e){ this.setData({ infoMess: '', userName: '', userN:'', passWd: '', passW:'', }) }, onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) } }) Nach dem Login kopieren Dann rein die zweite Die Schnittstelle zeigt Eingaben mit unterschiedlichen Stilen und Funktionen

TextInput输入框展示 使得输入框获取焦点 你输入的是：{{inputValue}} Nach dem Login kopieren

// pages/index/Component/TextInput/TextInput.js Page({ data: { focus: false, inputValue: '' }, bindButtonTap: function() { this.setData({ focus: true }) }, bindKeyInput: function(e) { this.setData({ inputValue: e.detail.value }) }, bindReplaceInput: function(e) { var value = e.detail.value var pos = e.detail.cursor if(pos != -1){ // 光标在中间 var left = e.detail.value.slice(0,pos) // 计算光标的位置 pos = left.replace(/11/g,'2').length } // 直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置 return { value: value.replace(/11/g,'2'), cursor: pos } // 或者直接返回字符串,光标在最后边 // return value.replace(/11/g,'2'), }, bindHideKeyboard: function(e) { if (e.detail.value === "123") { //收起键盘 wx.hideKeyboard() } }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 } }) Nach dem Login kopieren Rendering:

【Verwandte Empfehlungen】

1 Quellcode der WeChat-Plattform herunterladen

2. WeChat Lala Takeaway 2.2.4 Entschlüsselte Open-Source-Version des WeChat Rubik's Cube-Quellcodes

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

Ausführliche Erläuterung von Beispielen für von WeChat entwickelte Eingabesteuerungen