专栏首页算法与编程之美微信小程序|文本框和页面分割线

微信小程序|文本框和页面分割线

问题描述

如何制作一个文本框,并改变其在页面所处位置?

如何在页面中设置一个分割线?

怎样让文本和表格居于同一高度?

在配置微信小程序的页面时,大部分普通页面需要添加文本框并在其中设置文本,以及设置分割线,其中也包括设置样式所处位置。这就需要我们合理使用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文本框示例

<view><view></view><view>文本</view><view></view><view><text>敬请期待...</text></view></view>

表3.3 WXSS示例

.view1{ border: 1rpx solid lavender; width: 250rpx; margin-top: 80rpx; margin-left: 55rpx; float: left}.text{ float: left; margin-left: 35rpx; margin-top: 50rpx}.view2{ border: 1rpx solid lavender; width: 250rpx; margin-top: 80rpx; margin-left: 30rpx; float: left}

(3)页面设置效果图

图3.1页面设置效果图

结语

我们在制作一个表格时注意两个表格如果重叠,则需要在WXSS中设置一个float浮动元素,让两个表格在空间上不处于同一平面。同样设置分割线时,也需要让文本和线(无高度)表格处于同一水平线上,也需要用到浮动。

END

实习编辑 | 王楠岚

责 编 | 吴怡辰

where2go 团队


本文分享自微信公众号 - 算法与编程之美(algo_coding)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

推荐阅读

  • 如何将设计思维应用到精益初创公司的软件开发

    我们所说的设计思维,是指由 IDEO 公司的 Tim Brown 提出,并且正在改变全世界组织的设计思维,简称 DT。(译者注:IDDO,当代最具影响力的设计公司之一)

    Aceyclee
    Serverless无服务器云函数
  • InnoDB 事务加锁分析

    一般大家对数据库事务的了解可能停留在事务的ACID特性以及事务4种不同的隔离级别层面上,而对于事务 4 种不同隔离级别如何实现了解相对较少。

    2020labs小助手
    MySQLSQL数据库MVCMVCC
  • FutureTask 核心源码解析

    研究源码,一般我们都从整体以及实例先入手,再研究细节,不至于一开始就“深陷其中而"当局者迷".

    JavaEdge
    HTTPJava
  • 200行代码落地人脸识别开锁应用

    2019年国庆,帮朋友实现了一个人脸识别进行开锁的功能,用在他的真人实景游戏业务中。几个月来运行稳定,体验良好,借着这个春节宅家的时间,整理一下这个应用的实现过程。

    高树磊
    人脸识别图像处理
  • 滑动验证码攻防对抗

        在业务安全领域,滑动验证码已经是国内继,传统字符型验证码之后的标配。众所周知,打码平台和机器学习这两种绕过验证码的方式,已经是攻击者很主流的思路,不再阐述。冷渗透介绍的是一个冷门的绕过思路和防御方案。这些积累,均来自于实战之中,希望有用。

    周俊辉
    HTTP网络安全安全网站
  • 程序员进阶必读,万字总结Mysql优化精华篇

    price decimal(8,2)有2位小数的定点数,定点数支持很大的数(甚至是超过int,bigint存储范围的数)

    程序员内点事
    全文检索缓存SQL数据库Python
  • 运维转型 | 运维人不再只是“救火英雄”

    各行各业都开启了数字化转型的进程,运维团队在这种时代的浪潮中又该何去何从?我在帮助一些企业落地了运维技术平台之后,开始反思这个问题,并将所思所想整理成本篇文章。

    嘉为科技
    企业运维自动化云计算
  • WEB开发常见的安全漏洞和解决思路

    SQL注入时web开发中最常见也是危害性最大的安全漏洞,SQL注入攻击可能会导致 服务器故障,数据泄漏,数据被恶意删除等等严重后果。

    windwei
    SQLHTTPhttps安全漏洞PHP
  • 详解Winograd变换矩阵生成原理

    文本首发知乎:https://zhuanlan.zhihu.com/p/87516875

    Ldpe2G
    编程算法
  • Linux网络性能优化相关策略

    1. rx-checksumming:校验接收报文的checksum。

    glinuxer
    Linux

扫码关注云+社区

领取腾讯云代金券