[微信小程序专题] 文本框和页面分割线
欢迎点击「算法与编程之美」↑关注我们!
本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。
问题
如何制作一个文本框,并改变其在页面所处位置?
如何在页面中设置一个分割线?
怎样让文本和表格居于同一高度?
在配置微信小程序的页面时,大部分普通页面需要添加文本框并在其中设置文本,以及设置分割线,其中也包括设置样式所处位置。这就需要我们合理使用view标签搭配WXSS配置页面。
方法
(1)制作文本框及设置位置
给两个view标签设置类名,并在WXSS中设置其文本框的样式,包括设置边框大小样式,用width,height和border属性。文本框位置用margin属性。
表3.1文本框代码
.view3{ width: 500rpx; height: 100rpx; border: 3rpx solid lightgrey; float: left; margin-left: 120rpx; margin-top: 60rpx } |
(2)设置分割线
分割线的设置可以用设置文本框的形式,只需在WXSS中将height设置为0。
表3.2 WXML文本
[微信小程序专题] 文本框和页面分割线相关推荐
- 微信小程序开发文本框无法输入文字
杀程序员祭天 在小程序开发组件中使用了文本框组件,鼠标点击无法获取焦点,输不了内容(这里移动端事实上是可以输入的,只是pc端的模拟器输入不了),wxml和js代码如下: <input place ...
- 微信小程序中文本框添加空格
<text space="ensp">姓 名:</text> 通过在text标签中 引用样式space="ensp"进行空格
- 微信小程序富文本处理
微信小程序富文本处理 wxml页面代码: <rich-text nodes ="{{content.content}}"></rich-text> ts代码 ...
- 微信小程序 顶部搜索框滑动伸缩效果的实现
项目场景:微信小程序顶部搜索框随页面滑动伸缩效果 提示:实现搜索框跟随用户滑动页面,实现伸缩效果 微信小程序 顶部搜索框滑动伸缩动画的实现 实现效果: 滑动前 滑动后 实现原理 提示:主要用到了微信小 ...
- 微信聊天自动解析html文本,微信小程序纯文本实现@功能
前言 大家肯定对@功能不陌生,在如今的各大社交软件中它是一种不可或缺的功能.实现@人的功能并不复杂,只需将@人员的id传给后端,后端下发通知即可.主要的复杂点在于一键删除功能与变色功能,web端可以使 ...
- 微信小程序 - 富文本图片宽度自适应(正则)
引言:在微信小程序里,比如商品展示页面的商品详情会有图片展示,PC端设置的商品详情是PC端的宽度,所以在小程序里图片会显示不全,这时就应该做相应的处理,使小程序里图片显示正确 思路 把图片的宽度改为手 ...
- 微信小程序 富文本编辑器组件 editor
微信小程序 富文本编辑器组件 editor <view class="container"><view class="titlebox"> ...
- 自学微信小程序开发第五天- 页面切换相关
自学微信小程序开发第五天- 页面切换相关 创建多个页面 页面间跳转 页面间传值 另一个页面跳转的方式(重定向) 点击跳转元素时的样式 导航API 研究过页面样式设计后,就是多页面的呈现了,这就需要研究 ...
- 微信小程序自定义搜索框(searchbar)
微信小程序自定义搜索框(searchbar) 样式截图展示: 功能描述:微信小程序页面需要加入搜索框时,可以直接引用到页面中使用,当用户未输入任何关键字时如第一张图所示,当用户输入要搜索的关键字时如第 ...
最新文章
- android水平滚动条,Android使用HorizontalScrollView实现水平滚动
- C#.NET中的base关键字在派生类里的应用
- CodeProject上的最近几篇关于IronPython技术的文章
- matlab信号分割与比对,matlab测量计算信号的相似度
- a访问过后hover样式就不出现了 被点击访问过的超链接样式不再具有hover和active 解决方法...
- jinja2模板注入_Flask jinja2 模板注入思路总结
- 拳王虚拟项目公社:闲鱼操作卖资源如何赚钱?闲鱼怎么卖虚拟资源?卖什么资源赚钱?
- kafka项目启动_使用Kafka Connect 同步Kafka数据到日志服务
- UNI-APP实现扫描二维码
- 语音处理:音频信号采样点白化方法初探
- 完整性与完备性的区别
- 一步一步实现WPF透明化窗口
- Lumen超全功能知识点来了,ue5初学者们必看
- 重温Python基础——列表
- Python爬取10000条“爆款剧”——《三十而已》热评,并做可视化
- 线性代数笔记:逆矩阵及伪逆矩阵,最小二乘估计,最小范数估计
- FireFox下载时文件名乱码问题解决
- DD马达与直线电机的特点和发展
- maven系列:maven依赖讲解
- 数字孪生应用白皮书(2020版)|PDF下载