转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-07/

细说下微信小程序的wxss样式文件。源码:https://github.com/limingios/wxProgram.git 中的No.2

样式rpx

原来在html里面都是使用px和pt,微信这边自定义的rpx的方式。
文档:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

/* pages/index/index.wxss */
.txt-test{
margin-top: 800rpx;
}

外部样式引入

新建一个跟现有的文件夹内的wxss名称不一样的,一个文件名称,然后import 引入外部的wxss,就可以在wxml使用了。通过@import 的方式引入到本身要引入的wxss里面,然后

/* pages/index/out.wxss */
.txt-left{
margin-left: 100rpx;
}
/* pages/index/index.wxss */
@import "out.wxss"; .txt-test{
margin-top: 800rpx;
}
//index.js
Page({
data: {
motto: '测试下数据绑定',
testoutcss: '测试外部css样式',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
}
})
<!--index.wxml-->
<view class="container">
<text class="txt-test">{{motto}}</text>
<text class="txt-left">{{testoutcss}}</text>
</view>

样式关键字使用数据绑定的方式

样式里面也可以通过数据绑定的方式进行显示

//index.js
Page({
data: {
motto: '测试下数据绑定',
testoutcss: '测试外部css样式',
color:"red",
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
}
})

color绑定的方式

<!--index.wxml-->
<view class="container">
<text style="color:{{color}}">{{motto}}</text>
<text class="txt-test">{{motto}}</text>
<text class="txt-left">{{testoutcss}}</text>
</view>

全局样式和局部样式名称相同的选择

全局样式和局部样式名称相同时,按照局部的样式进行

  • 定义全局txt-right进行演示
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
} #txt-right{
margin-right: 100rpx;
color: yellow;
}
  • 定义局部txt-right进行演示
/* pages/index/index.wxss */
@import "out.wxss"; .txt-test{
margin-top: 800rpx;
} #txt-right{
margin-right: 300rpx;
color: black;
}
<!--index.wxml-->
<view class="container">
<text id="txt-right">{{globalcss}}</text>
<text style="color:{{color}}">{{motto}}</text>
<text class="txt-test">{{motto}}</text>
<text class="txt-left">{{testoutcss}}</text>
</view>

PS:样式这块比较依赖html中的css,明白如何引用,关联关系,style的方式自定义样式。

「小程序JAVA实战」 小程序wxss样式文件的使用(七)的更多相关文章

  1. 「小程序JAVA实战」小程序的flex布局(22)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-22/ 之前已经把小程序的框架说完了,接下来说说小程序的组件,在说组件之前,先说说布局吧.源码:ht ...

  2. 「小程序JAVA实战」 小程序手写属于自己的第一个demo(六)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-06/ 自己尝试的写一个小demo,用到自定义样式,自定义底部导航,页面之间的跳转等小功能.官方文档 ...

  3. 「小程序JAVA实战」小程序的留言和评价功能(70)

    转自:https://idig8.com/2018/10/28/xiaochengxujavashizhanxiaochengxudeliuyanhepingjiagongneng69/ 目前小程序这 ...

  4. 「小程序JAVA实战」小程序的举报功能开发(68)

    转自:https://idig8.com/2018/09/25/xiaochengxujavashizhanxiaochengxudeweixinapicaidancaozuo66-2/ 通过点击举报 ...

  5. 「小程序JAVA实战」小程序的个人信息作品,收藏,关注(66)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudegerenxinxizuopinshoucangguanzhu65 ...

  6. 「小程序JAVA实战」小程序的关注功能(65)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeguanzhugongneng64/ 在个人页面,根据发布者个人和 ...

  7. 「小程序JAVA实战」小程序的视频点赞功能开发(62)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeshipindianzangongnengkaifa61/ 视频点 ...

  8. 「小程序JAVA实战」小程序的springboot后台拦截器(61)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudespringboothoutailanjieqi60/ 之前咱们把 ...

  9. 「小程序JAVA实战」小程序首页视频(49)

    转自:https://idig8.com/2018/09/21/xiaochengxujavashizhanxiaochengxushouyeshipin48/ 视频显示的内容是视频的截图,用户的头像 ...

随机推荐

  1. Struts01---入门小案例

    创建web项目    实现的效果! 用户点击页面不同的链接,后台调用不同的代码! 创建两个类实现共同的接口! public interface Action { String execute(); } ...

  2. 面试题48:用C++设计一个不能被继承的类

    解法一:把构造函数设为私有 将构造函数定义为私有,然后通过定义公有的静态函数来创建和释放类的实例. { public: static SealedClass1* GetInstance() { ret ...

  3. position值详情

    1.absolute属性: 英文直译成汉语的解释有:绝对,独立的.显然在做为css中position属性的值时“绝对”这个意思更恰当一些.他的作用是:生成绝对定位的元素,相对于static 定位以外的 ...

  4. Tinymce group plugin

    本文介绍一个tinymce插件,用来组合显示下拉的按钮.基于4.x,不兼容3.x. 以前 配置toolbar功能按钮 需要          toolbar1: "code undo red ...

  5. C#模拟网络POST请求

    using System; using System.IO; using System.Net; using System.Text; using System.Collections.Generic ...

  6. WAL日志文件名称格式详解

    转自:http://blog.osdba.net/534.html WAL日志文件名称格式详解 PostgreSQL的WAL日志文件在pg_xlog目录下,一般情况下,每个文件为16M大小: osdb ...

  7. tcp 服务端和客户端程序设计

    一.实验目的 学习和掌握Linux下的TCP服务器基本原理和基本编程方法,体会TCP与UDP编程的不同,UDP编程:http://blog.csdn.net/yueguanghaidao/articl ...

  8. Android 进阶10:进程通信之 Messenger 使用与解析

    读完本文你将了解: Messenger 简介 Messenger 的使用 服务端 客户端 运行效果 使用小结 总结 代码地址 Thanks 前面我们介绍了 AIDL 的使用与原理,这篇文章来介绍下 A ...

  9. php打印乘法口诀表

    <?php $n=9; //动态控制乘法口诀表的行数 echo"<table>"; //外层循环控制行数 for($i=1;$i<=$n;$i++){ // ...

  10. I-O流概念认知升级

    在文件操作基础入门中,我们提到了流的 概念,这篇我们将更多的介绍流这个东西,以及C的I/O相关知识 现在,我们从C程序员最熟悉的printf函数开始学习I/O流. 我们对printf函数一直是很喜爱的 ...