微信小程序在text文本实现多种字体样式


Posted in Javascript onNovember 08, 2019

这篇文章主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

微信小程序比较特别,它的wxml只允许用自己家的标签,像那些span、div什么的统统不可以用,那如何在text文本加入不同的样式呢,在html里面我们可以添加一个span,再给那些span添加不同的class或者style就可以了,但小程序不可以,在text里面只允许在加入text,不可以加view等东西,所以我们可以按照它提供的,再加一个text就可以了,但是随之而来的还有一些bug,一般的我们都是直接某个class下面的text应用某些样式,如:

微信小程序在text文本实现多种字体样式

这样我们新加的text也会应用到那些样式了,导致整体样式的改变,解决方法是按照css里面提供的一个大于号>,像这样

微信小程序在text文本实现多种字体样式

这样子就可以了,大于号表示当前view下面一级的text,下下面的text不会应用到,具体的可以去查看微信小程序css手册里面的用法

再给那些span添加不同的class或者style就可以了,但小程序不可以,在text里面只允许在加入text,不可以加view等东西,

所以我们可以按照它提供的,再加一个text就可以了,但是随之而来的还有

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
jquery 多行滚动代码(附详细解释)
Jun 17 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
js正则表达式匹配数字字母下划线等
Apr 14 Javascript
json实现添加、遍历与删除属性的方法
Jun 17 Javascript
全面了解js中的script标签
Jul 04 Javascript
react-native使用react-navigation进行页面跳转导航的示例
Sep 07 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 #Javascript
微信小程序select下拉框实现源码
Nov 08 #Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 #Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 #Javascript
vue中在vuex的actions中请求数据实例
Nov 08 #Javascript
vue 组件内获取actions的response方式
Nov 08 #Javascript
在vue中使用vuex,修改state的值示例
Nov 08 #Javascript
You might like
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
用PHP代码给图片加水印
2015/07/01 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
Python基于动态规划算法计算单词距离
2015/07/25 Python
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
南威尔士家居商店:Leekes
2016/10/25 全球购物
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
英语商务邀请函范文
2014/01/16 职场文书
员工生日活动方案
2014/08/24 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
辛德勒的名单观后感
2015/06/03 职场文书
PHP正则表达式之RCEService回溯
2022/04/11 PHP