[小程序开发] 样式组件

一、rpx

        可以根据不同设备的屏幕宽度进行自适应缩放，适配不同屏幕宽度的手机。

        微信小程序规定，不管什么型号的收集，屏幕的宽度都是750px。

在设计时可以用iPhone 6 作为视觉稿的标准，多少px，直接写多少rpx即可。

在iphone 6 下，1rpx=0.5px，所以750rpx=375px，正好可以填充整个屏幕宽度。

二、view

        容器组件，块级元素，类似于div，占据一行。

三、text

        渲染文本，text组件只接受text嵌套。

  <!--user-select长按以后选中文本,space="ensp"显示全部空格(以中文字符空格一半的大小展示),space="emsp"显示全部空格(以中文字符空格全部的大小展示),space="nbsp"显示全部空格(以字符的大小展示)-->
  <text user-select="ture" space="nbsp" >日    期</text>

user-select：文本是否可选，用于长按选择文本（只有text组件可以实现）。

space：显示连续空格。

四、swiper、swiper-item

        swiper是滑块视图容器，只能放置swiper-item组件。

        swiper-item只能放置在swipe组件中，宽高自动设置为100%，代表swiper中的每一项。

• 轮播图代码 

<!--轮播图区域-->
<view class="swiper">
  <!-- autoplay轮播图自动轮播,interval变化时间，indicator-dots底部显示小圆点,indicator-color小圆点的颜色，indicator-active-color小圆点被激活的颜色,circular从最后一张切换到第一张-->
  <swiper autoplay="true" interval="2000" indicator-dots="true" indicator-color="#fff" indicator-active-color="black" circular="ture">
    <swiper-item>
    轮播图1
    </swiper-item>
    <swiper-item>
    轮播图2
    </swiper-item>
    <swiper-item>
    轮播图3
    </swiper-item>
  </swiper>
</view>

五、image

        渲染图片

image默认宽320px，高240px，不给src属性设置图片地址，也占据宽和高

<swiper-item>
    <!--src图片地址,mode图片裁剪模式(mode="aspectFit"以长边充满整个容器；mode="aspectFill")以短边充满整个容器,show-menu-by-longpress长按显示菜单（转发好友、保存、识别图片二维码等功能,lazy-load图片懒加载（滑动到上下三屏的距离以后展示图片））-->
    <image src="../../assert/goods/2019102006312133654.jpg!cc0.cn.jpg"  show-menu-by-longpress="true" lazy-load="true"></image>
</swiper-item>

 mode="aspectFit"  ：以长边充满整个容器；

mode="aspectFill"  ：以短边充满整个容器

六、navigator

        进行跳转，路径后可以带参数，路径与参数之间用？分隔，参数键与参数值用=相连，不同参数用&相连， 但switchTab不能传参。

• 只能跳转到非TabBar页面，不能跳转到TabBar页面。

url：跳转链接

open-type：跳转方式

        navigate —— 保留当前页面，跳转到应用内的某个页面，但是不能跳转tabbar页面。(左上角显示返回上一级页面)

        redirect —— 关闭当前页面，跳转到应用内的某个页面，但是不能跳转tabbar页面。(左上角显示返回首页页面)

        switchTab —— 跳转到tabBar页面，并关闭其他所有非tabBar页面。(不能传参)

        reLaunch —— 关闭所有页面，打开到应用内的某个页面。(左上角显示返回首页页面)

        navigateBate —— 关闭当前页面，返回上一页面或多级页面。(点击标签内文本默认返回上一级页面，返回多级页面添加dalta=”返回级数“属性)

七、scroll-view

        可滚动视图区域，适用于需要滚动展示内容的场景，用于在小程序中实现滚动效果。

scroll-x：允许横向滚动

scroll-y：允许纵向滚动

八、background-image

        设置元素的背景图像。

小程序的background-image不支持本地路径，需要使用网络图片，或者使用base64格式，或者使用<image/>组件。