微信小程序实现输入框与文本框数值联动效果

本篇文章主要讲解微信小程序下，input输入框输入后，页面中的文本信息进行即时更新联动的效果实现方法
日期：2022年10月4日
作者：任聪聪

一、效果演示

二、实现思路

给input框进行绑定函数，然后再用函数将变量赋值给文本元素。

三、代码实例

wxml文件内容

<view><input  value="{{sv}}" type="text" placeholder="此处输入数据" bindinput="inputGetDemo"/><text  space="nbsp">变量：{{sv}}</text>
</view>

wxjs文件内容

const app = getApp()Page({data: {},onLoad() {},inputGetDemo(e){var val = e.detail.value;this.setData({sv:val})}
})

微信小程序实现输入框与文本框数值联动效果相关推荐

微信小程序实现美团外卖菜单分类,左右联动效果
最近项目要求写一个美团菜单分类左右联动的需求记录一下 1,首先需要使用到 scroll-view 组件左右2边都需要滑动直接上代码 scroll-into-view 值应为某子元素id(id ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
微信小程序获取输入框(input)内容
微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type= ...
微信小程序之toast等弹框提示
微信小程序中toast消息提示框只有两种显示的效果,就是成功和加载,使用wx.showToast(OBJECT). 看下有关参数说明: 代码很简单: wx.showToast({title: '成功' ...
【微信小程序封装底部弹出框二】
[微信小程序封装底部弹出框二]  <view><button style="margin-top: 300px;" ...
微信小程序 input 输入框控件 bindinput 没有响应
微信小程序 input 输入框控件 bindinput 没有响应问题: 微信小程序 input 输入框控件 bindinput 没有响应原因: 我以为是我这边的问题,检查很多遍检查不出来,最后换个 ...
微信小程序之select下拉框
wxml: <view class="classify-kuangjia"><view class="classify-kuangjia2"& ...
微信小程序勾选协议与提交按钮联动
微信小程序勾选协议与提交按钮联动在一些小程序的开发中有时会实现,未勾选相关协议,提交按钮是禁用状态,勾选相关协议,提交按钮变成可用状态.如下图所示: 主要用到开发文档按钮组件的一个属性: 代码: w ...
微信小程序-实现元素渐入渐出动画效果-封装方法
开端之前一直使用堪称"万能"的jQuery处理用户交互的动画,近日开发微信小程序,微信小程序高度限制的语法和功能使开源函数可谓对其"无能为力". 那没办法,只 ...

微信小程序实现输入框与文本框数值联动效果

一、效果演示

二、实现思路

三、代码实例

微信小程序实现输入框与文本框数值联动效果相关推荐

最新文章

热门文章