关于css:保姆级教程写出自己的移动应用和小程序篇五

在上期文章中,咱们次要聊了聊如何写出一个简略的小程序。既然聊到了编写小程序,那不得不提的就是如何编写其中的 CSS 款式内容,一起来看看吧。

一、总体款式

小程序容许在顶层搁置一个 app.fxss 文件,外面采纳 CSS 语法设置页面款式。这个文件的设置,对所有页面都无效。

留神,小程序尽管应用 CSS 款式,然而款式文件的后缀名一律要写成 .fxss。

关上上一篇教程的示例根目录 app.ftss 文件,内容如下。

因为 FinClip 小程序放弃了与微信小程序的高度对立,来升高开发者的学习或迁徙门槛,事实上你也能够间接在 FIDE 中编辑基于微信小程序的我的项目内容,或者将基于微信小程序编辑的内容进行校验后,同步上传在 FinClip 之中。

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

FIDE 初始化小程序页面曾经给最外层标签增加了 container 类,此时在 container 类名下增加一个 color 款式:

color: #ff0000;

保留后页面从新渲染,文字变为红色:

内容变红了

这就是总体款式,设置之后会对所有页面失效。例如第二个页面中元素 view 也领有class:container,那么它的文字色彩也为红色。

page1 页面中的文字也变成了红色

二、页面款式

在小程序每个页面门路下 ftss 文件中款式内容只会影响以后页面。

当咱们在 index 页给 view 元素增加一个 class:“unique-class”,并在页面 ftss 文件中扭转 font-size 款式:

<view class="container unique-class">index页</view>
.unique-class{
  font-size: 66px;
}

那么不言而喻在 index 页 view 元素内容字体大小将变为 66px

此时 page1 页同样增加class:“unique-class”,款式并没有受到影响

三、行内款式

小程序中也能够给元素设置行内款式,并且能够应用插值变量。同样,行内款式优先于 class 款式,与一般 css 规定统一。

咱们用了内联款式之后,优先级最高

应用差值变量:

扭转元素 style 属性 color 值为自定义变量 fontColor

<view class="container unique-class"
      style="color: {{fontColor}}">
    index页
</view>

在页面 data 中增加 fontColor 变量,赋值为想要的色彩

Page({
  data: {
    motto: 'Hello World',
    fontColor: '#10aeff'
  }
})

这样就能够通过 js 管制元素行内款式了

同样,插值变量的形式也能够使用到 class 中以达到类似的成果。

四、尺寸单位

小程序中能够应用 rpx 作为尺寸单位。rpx(responsive pixel)能够依据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上,屏幕宽度为 375px,共有 750 个物理像素,则 750rpx = 375px = 750 物理像素,1rpx = 0.5px = 1 物理像素。

正当应用 rpx 会让小程序体验感更好。

五、款式导入

应用 @import 语句能够导入外联样式表,@import 后跟须要导入的外联样式表的相对路径,用 ; 示意语句完结。

/** common.wxss **/
.small-p {
  padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

六、组件内置款式

小程序提供的内置组件定义了自有逻辑和默认款式,以供开发者疾速应用。当然开发者也能够在此基础上批改为其余款式和行为。

例如:小程序原生的 <swiper> 组件能够让开发者疾速应用图片轮播性能。

下面页面的图片下面,有三个提醒点,示意一共有三张图片,能够切换显示。

它的代码很简略,改一下 index.fxml 文件,并且在 /assets/images/ 目录下增加想要轮播的图片即可。

<view>
  <swiper
    indicator-dots="{{true}}"  
    autoplay="{{true}}"
    style="width: 750rpx; height: 750rpx; text-align: center;">
    <swiper-item>
      <image src="/assets/images/logo.png"></image>
    </swiper-item>
    <swiper-item>
      <image src="/assets/images/logo2.png"></image>
    </swiper-item>
    <swiper-item>
      <image src="/assets/images/logo3.png"></image>
    </swiper-item>
  </swiper>
</view>

下面代码中,<swiper> 组件就是轮播组件,外面搁置了三个 <swiper-item> 组件,示意有三个轮播我的项目,每个我的项目就是一个 <image> 组件。

<swiper> 组件的 indicator-dots 属性设置是否显示轮播点,autoplay 属性设置是否自动播放轮播。它们的属性值都是一个布尔值,这里要写成 {{true}}。


在下一期的文章中,咱们将会一起聊聊如何应用 JSS,服务端调用等相干的内容,敬请期待。

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据