精华内容
下载资源
问答
  • 主要介绍了微信小程序input框中加入小图标的实现方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 欢迎点击「算法与编程之美」↑关注我们!本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。问题描述如何更改小程序页面中的文本框颜色和边框样式?如何...

    欢迎点击「算法与编程之美」↑关注我们!

    本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。

    问题

    如何更改小程序页面中的文本框颜色和边框样式?

    如何实现多个文本框的排版?

    如何实现点击一个文本框即跳转页面?

    我们在使用一个小程序时,总是会看到页面给出你不同的选择文本框,而你需要单击文本框跳转到你需要了解的内容页面中去。因此,如何美化这些文本框以及如何配置页面跳转是我们需要解决的问题。

    方法

    (1)设置文本框背景颜色。在WXSS的代码编写中增加一个background属性,如果要设置渐变色,需要一个-webkit-linear-gradient()属性,同时在括号内指出是从左向右开始渐变(left或to right)。注意:设置渐变色也有两种颜色设置方法。一是直接找到同色系的颜色来添加,二是直接更改颜色深浅比例。

    展开全文
  • 微信小程序 自定义封装模态框modal组件,可以上下左右四个方向弹出;用法博客:https://blog.csdn.net/lianzhang861/article/details/88013556
  • 弹出modalPage({data:{// text:"这是一个页面"hiddenModal: true,yijian: ""},Button:function() {this.setData({hiddenModal: !this.data.hiddenModal})},confirmM:function() {this.setData({hiddenModal: true})...

    3a81e889645ecedb5df2322cf251fb8c.png

    弹出modal

    Page({

    data:{

    // text:"这是一个页面"

    hiddenModal: true,

    yijian: ""

    },

    Button:function() {

    this.setData({

    hiddenModal: !this.data.hiddenModal

    })

    },

    confirmM:function() {

    this.setData({

    hiddenModal: true

    })

    console.log("意见" + this.data.yijian);

    },

    cancelM:function() {

    this.setData({

    hiddenModal: true

    })

    },

    yijian: function (e) {

    this.setData({

    yijian: e.detail.value

    })

    },

    onLoad:function(options){

    // 页面初始化 options为页面跳转所带来的参数

    },

    onReady:function(){

    // 页面渲染完成

    },

    onShow:function(){

    // 页面显示

    },

    onHide:function(){

    // 页面隐藏

    },

    onUnload:function(){

    // 页面关闭

    }

    })

    展开全文
  • 主要介绍了微信小程序picker组件下拉框选择input输入框的实例的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
  • 微信小程序——好看的文字加输入框(文本框

    千次阅读 多人点赞 2021-03-02 16:02:03
    效果图: wxml代码: <view class="view-contain-ti"> <text class="text-ti">账号</text> <input class="input1"></input> </view>... border: 3rpx soli

    效果图:
    在这里插入图片描述
    wxml代码:

    <view class="view-contain-ti">
        <text class="text-ti">账号</text>
        <input class="input1"></input>
    </view>
    

    wxss代码:

    .view-contain-ti {
      display: flex;
      height: 40px;
      margin: 20px;
      border: 3rpx solid #faca82;
      border-radius: 10rpx;
    }
    
    .text-ti {
      position: absolute;
      font-size: 12px;
      background: white;
      margin: -10px 0 0 10px;
      padding: 0 5px;
      color: rgb(144, 147, 167);
    }
    
    .input1 {
      margin:  auto 10px;
    }
    
    展开全文
  • 微信小程序定制过程中用到的Input输入框控件。 输入框在程序开发中是经常用到的,比较常见的地方,如:登录、注册、搜索等。 另外输入框在不同的场景下,也会有不同的样式。 这里给大家示范一下各种场景下的实例效果...
  • 微信小程序开发中,input 用来实现文本输入,如输入用户名密码等等

    也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好。

    在微信小程序开发中,input 用来实现文本输入,如输入用户名密码等等

    1 基本使用

    <input class="input" name="userName" placeholder="请输入用户名" auto-focus="true" />
    

    基本效果就是显示了一个文本输入框。

    • placeholder 输入框为空时的占位符
    • auto-focus 自动聚集,拉起键盘,需要注意的是一个页面中只能有一个 input 标签 或者 textarea 来设置这个属性

    在这里插入图片描述

    2 获取输入框中的内容

    bindinput 属性用来绑定键盘输入时的事件监听,也就是可以实时获取输入中的内容 。

    当然 在你的处理函数中可以直接 return 一个结果来替换输入框中的内容。

      <input bindinput="userNameInputAction"  class="input" name="userName" placeholder="请输入用户名" auto-focus="true" />
    

    对应的 js

      /**
       * 输入框实时回调
       * @param {*} options 
       */
      userNameInputAction: function (options) {
        //获取输入框输入的内容
        let value = options.detail.value;
        console.log("输入框输入的内容是 " + value)
      },
    

    效果
    在这里插入图片描述

    3 输入框焦点监听

    应用场景还是比较多的,比如输入结束时 去校验个数据什么的

    • bindfocus
    • bindblur 输入框焦点移出
    • bindconfirm 点击键盘的回车键或者是完成按钮时回调的事件
      <input bindfocus="userNameFocusAction" bindblur="userNameBlurAction" bindconfirm="userNameConfirm" placeholder="请输入用户名" />
    

    对应的 js

      userNameFocusAction: function (options) {
        //输入框焦点获取
        let value = options.detail.value;
        console.log("输入框焦点获取 " + value)
      },
    
      userNameBlurAction: function (options) {
        //输入框焦点移出
        let value = options.detail.value;
        console.log("输入框焦点移出 " + value)
      },
      
      userNameConfirm: function (options) {
        //点击了键盘上的完成按钮
        let value = options.detail.value;
        console.log("点击了键盘上的完成按钮 " + value)
      },
    

    效果图
    在这里插入图片描述

    4 常用输入限制

    • disabled 默认为false 不禁用输入框,为true时是不可输入的
    <input disabled="{{isInput}}" placeholder="请输入用户名" />
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        isInput:true
      },
    
    })
    

    在这里插入图片描述

    • password 默认为 false ,为true时,输入的内容为密码类型
    <input  password="true" placeholder="请输入用户名" />
    

    在这里插入图片描述

    • value 输入框初始内容

    5 type 文本框输入内容格式

    在HTML中,input组件中的type属性可以接收哪些值,有button、text、radio、checkbox、hidden、image、reset、submit等。而在微信小程序中,type属性只有text、number、idcard、digit、time和date。

    • type 输入框可输入的数据 类型
    text文本
    number数字 纯数字键盘模式输入 无小数点
    idcard数字 数字键盘(无小数点、有个 X 键)
    digit数字 带小数点的数字键盘模式输入

    完毕

    展开全文
  • 想开发微信小程序,该怎样做呢?请移步微信公众号查看小程序编译。@刘老大吖微信里的小程序字体能调大吗?谢邀。微信里的字体是可以设置大小的。在微信“设置”中,点击“通用”,可以看到有“字体大小”这一项,...
  • 真机测试时有些机型显示如下,样式丑陋 问题解决: 限制输入手机号这一组件的宽度,添加style="width:{{'200rpx'}}" <input placeholder="请输入您的手机号" type='number' maxlength='11' bindinput='...
  • 微信小程序中文本框添加空格

    千次阅读 2018-09-17 18:10:00
    代码 姓 名: 通过在text标签中 引用样式space=”ensp”进行空格
  • 在做小程序过程中做一个6位验证码输入框,本以为很简单,但是在写的时候遇到各种各样的阻力,在网上查阅资料也寥寥无几,后来经过一番思考,终于敲定下来本人最满意的方案,特意发出来让大家参考一下,希望能帮到...
  • 微信小程序 最近在学习小程序开发,在学习的过程中感受到了内容之多,这里总结了一些小程序开发的一些常用属性与方法,更加具体的还得通过打开微信开放文档进行学习,在学习的过程中多打demo才是最好的学习方式啊,...
  • 微信小程序--搜索框样式总结

    万次阅读 多人点赞 2019-01-13 21:26:02
    这是一个复杂点的搜索框样式:初始搜索框无法编辑和输入,点击搜索框使搜索框进入可编辑状态(在同一个页面完成),在搜索框内填入要搜索的内容 点击第一幅图中的搜索框,搜索框样式变成第二幅图中的样式,点击...
  • 在移动端里, 当输入框处于页面比较下方的时候回发生键盘覆盖输入框的情况, 在小程序中也发生了类似情况, 但小程序提供了一些api, 但不能达到需求. 这里来简单说一下解决思路. 小程序的默认行为 在发生了键盘覆盖...
  • 今日写段样式,规定两行文本显示,超出用…表示 在网上一搜css控制多行文本显示,超出用省略号,大家给出的代码片段如下(记得给容器设置边界哦) .subtitle{ font-size: 28rpx; color: #999; width: 452rpx; ...
  • 微信小程序 textarea 简易解决方案 微信小程序中textarea没有bindchange事件,所以无法在输入时给变量赋值。 虽然可以使用bindblur事件,但是绑定bindblur事件,如果再点击按钮,则先执行完按钮事件后,再去执行...
  • 微信小程序开发初学:输入框 - input

    千次阅读 2021-01-27 11:40:30
    输入框。 input具有的属性 value 类型:String 默认值:无 输入框内的初始内容 type 类型:String 默认值:text ... } 内容参考自小程序API: https://developers.weixin.qq.com/miniprogram/dev/component/input.html
  • 零基础入门微信小程序开发

    万次阅读 多人点赞 2018-07-03 02:45:07
    本课程是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装...
  • 欢迎点击「算法与编程之美」↑关注我们!本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。问题描述如何制作一个文本框,并改变其在页面所处位置?如何...
  • 微信小程序改变字体的颜色

    万次阅读 2019-04-18 09:37:34
    加入当前字体颜色如下 ...如果在样式wxss中设置字体的颜色就不容易改变了 这个时候可以是个style样式 在data中初始化字体的颜色值, 然后在操作后再设置字体的颜色就可以改变颜色值了 ...
  • 微信小程序input失焦异常

    千次阅读 2021-01-16 13:08:35
    1.问题描述 初始打开页面,input框自动聚焦,在输入n位数字后自动触发事件进行业务处理,结果以页面底部弹框形式展示,同时input失焦。 但目前问题是,底部弹框出现后,... 微信版本为6.6.7 请教各位大神,在线等。
  • 1. 我们都知道,有些介绍,既有图片又要文字排版,单一的样式不能满足需求,但是微信小程序的wxml又不支持div和p标签,所以本片博客介绍了富文本框的试用,2.首先在我们的后台,我们使用的是百度的富文本框ueditor...
  • 微信小程序页面元素居中布局

    千次阅读 2020-08-12 14:10:51
    最近做的小程序项目中都涉及到了这样一个现象,单个页面上分两块或者三块区域布局,上面一到两个模块需要固定显示在页面上,最下面的模块就需要做成可滑动布局。 针对上述问题,首先想到的解决方案当然是上面的用...
  • 微信小程序-文字居中

    千次阅读 2020-03-15 16:18:32
    文章目录 wxml代码 wxss代码 wxml代码 这是... /*设置显示样式**/ align-items: center; /**子view垂直居中*/ vertical-align: center; /**垂直居中*/ justify-content: center; /**内容居中*/ flex-direction:row; }
  • 解决微信小程序input文字贴左侧问题

    千次阅读 2020-12-03 10:43:43
    1.写了一个提交表单,input文字贴近左侧,很不好看 原wxml: <view class="label-list"> 所在公司/学校view> 请输入您的公司/学校" value="{{... } 综上所述,即在input外加一个view标签,样式为相对定位,left : 20px
  • 微信小程序自带的API中的页面交互功能,虽然提示功能非常全面,但是所有的交互API中是没有可以自己在提示框中输入文本的功能,那么现在我们来自己做这样的一个提示框(可以带有输入功能),在提示框输入完内容之后,...
  • 微信小程序开发中经常用到input组件,但是如果按下面的wxml代码去写,input的边框是不会显示的,只有在鼠标点过去的时候才会有个光标 <view class="setinput"> <input class="input1"></input&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,961
精华内容 784
关键字:

微信小程序文本框样式

微信小程序 订阅