当前位置:   article > 正文

微信小程序基础学习(WXSS+组件)_text-stroke 小程序

text-stroke 小程序

WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

与 CSS 相比,WXSS 扩展的特性有:单位尺寸和样式导入

一、书写位置

1.1内联样式

<text style="background-color: aqua;font-size: 20px;">内联样式</text>

1.2页内样式

写在.wxss文件中

  1. .wxsstest01{
  2. height: 30px;
  3. width: 200px;
  4. background-color: rgba(146, 146, 236, 0.692);
  5. font-size: 30px;
  6. }

1.3全局样式

全局样式写在app.wxss中,这其中的样式在全局的页面中都是可以直接使用的,而对于组件来说是应用不了的

1.4优先级

内联>页内>全局;

可以通过!important来提升优先级

1.5wxss的导入

使用@import可以导入其他wxss样式文件


二、wxss的尺寸单位

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。


三、选择器


四、flex布局

wxss中的flex布局与css的flex布局相同,可以往前翻看CSS中的flex布局来进行学习


五、样式基础库

样式基础库

在使用样式基础库时,需要将页面结构、页面样式(style中)、页面逻辑都复制过来

应用组件要在.json文件中声明组件路径.


六、组件

在微信的官方文件中可以看到更加详细的组件内容

6.1view组件

view组件是个块级元素,默认效果是纵向排布的

view组件的一些属性

hover-stop-propagation需要用双大括号来写true和false

<view hover-class="tap" hover-start-time="0" hover-stay-time="0" hover-stop-propagation="{{true}}">111</view>

6.2text组件

text组件内部只能嵌套text组件,不独占一行也不能自由修改尺寸,但是可以通过display属性来进行修改

text的一些属性

 decode和空格转义符相结合

  1. <text space="emsp" selectable="{{true}}">1 1 1</text>
  2. <text space="ensp">1 1 1</text>
  3. <text space="nbsp">1 1 1</text>
  4. <text decode="{{true}}">1&nbsp;&nbsp;&nbsp;1</text>

蓝色部分被选中

6.3image组件

mode的合法值

直接使用src来导入本地图片

6.4icon组件

 type的有效值只能为:

 success,   success_no_circle,   info, warn,   waiting,   cancel,   download,   search,   clear

通过color可以直接更换图标的颜色

6.5button组件

button组件一般用于接收用户点击来执行不同逻辑

 button的属性:

①size属性值为default默认大小和mini小尺寸大小

②type属性为按钮的样式,属性值为default白色,primary绿色,warn红色三种颜色3

③plain属性表示镂空效果,下图中下面为镂空效果

 ④loading属性会在按钮前出现加载样式的图标

 ⑤from-type用于from组件,点击分别会触发form组件的 submit(提交表单)/reset(重置表单) 事件

 6.6swiper+swiper-item

swiper是指滑块试图容器,其中只可放置swiper-item组件,否则会导致未定义的行为,常用于轮播图当中。

swiper不单独使用,只有在swiper标签中嵌套swiper-item标签后才会显示内容。

 下面代码是一段简单的轮播图,WXSS代码不单独放出来了,直接使用下面代码图片会被拉伸,属性默认值为true时,可以不写{{true}}。

通过对image标签绑定点击事件就可以实现点击图片时的跳转效果

  1. <swiper class="lbt"
  2. indicator-dots="{{true}}"
  3. indicator-color="white"
  4. indicator-active-color="blue"
  5. autoplay="{{true}}"
  6. interval="3000"
  7. circular>
  8. <swiper-item>
  9. <image src="https://i0.hdslb.com/bfs/archive/a721e4d6ef86068e31fab0d8c0dc2ec1908ab736.jpg@672w_378h_1c.webp" class="image"></image>
  10. </swiper-item>
  11. <swiper-item>
  12. <image src="https://i2.hdslb.com/bfs/archive/66ad8314d4fa30cc0d44bcfe5fbba0ab2f4ffcdc.jpg@672w_378h_1c.webp" class="image"></image>
  13. </swiper-item>
  14. </swiper>

轮播图效果

6.6.1跳转效果:

在.js文件中使用wx.navigateTo({url:'UUURRRLLL'})实现页面的跳转,跳转后,在跳转页面中可以获取到跳转时所点击对象的属性值。

  1. _handleTap:function(){
  2. wx.navigateTo({
  3. url: '/page/1-view/1-view',
  4. })
  5. },

6.7movable-area + movable-view

是可移动的视图容器,在页面中可以拖拽滑动。movable-view必须在 movable-area组件中,并且必须是直接子节点,否则不能移动。movable-area是movable-view的可移动区域

基本属性

direction(移动方向)、inertia(是否有惯性)、friction(摩擦系数)

  1. <movable-area class="ma">
  2. <movable-view class="mv" direction="all"></movable-view>
  3. </movable-area>

当movable-view小于movable-area时,movable-view的移动范围是在movable-area内;

当movable-view大于movable-area时,movable-view的移动范围必须包含movable-area(x轴方向和y轴方向分开考虑) 

6.7.1样例

.wxml

  1. <view class="cell">
  2. <movable-area class="ma">
  3. <movable-view class="mv" direction="horizontal" x="{{isOpen?'-100rpx':'0'}}" bindtouchstart="_handleStart" bindtouchend="_handleEnd">滑动删除</movable-view>
  4. </movable-area>
  5. <button class="del" type="warn">删除</button>
  6. </view>

.js

  1. let lastTouch = 0;
  2. Page({
  3. _handleStart:function(evt){
  4. lastTouch = evt.changedTouches[0].pageX
  5. },
  6. _handleEnd:function(evt){
  7. let newTouch = evt.changedTouches[0].pageX
  8. let cha = newTouch - lastTouch;
  9. if(cha < -20){
  10. this.setData({
  11. isOpen:true
  12. })
  13. }
  14. else if(cha > 20){
  15. this.setData({
  16. isOpen:false
  17. })
  18. }
  19. else{
  20. this.setData({
  21. isOpen:this.data.isOpen
  22. })
  23. }
  24. },
  25. /**
  26. * 页面的初始数据
  27. */
  28. data: {
  29. isOpen:false
  30. },
  31. })

达到滑动一定程度自动滑开和闭合的效果

6.8scroll-view

是一个可滚动的试图区域

基本属性:

 

  1. <scroll-view class="sv"
  2. scroll-x
  3. scroll-y
  4. scroll-top="100px"
  5. scroll-left="100px ">
  6. <image src="https://i1.hdslb.com/bfs/archive/ad6e142961a272bcde1d92afbf5e0371a88f15c9.jpg@672w_378h_1c.webp"></image>
  7. </scroll-view>
  8. <scroll-view class="sv" scroll-y scroll-into-view="to3">
  9. <button>1</button>
  10. <button>2</button>
  11. <button id="to3">3</button>
  12. <button>4</button>
  13. <button>5</button>
  14. <button>6</button>
  15. </scroll-view>


七、自定义组件

将整个app的各个页面分解成一个个组件的开发称为组件化,组件化能够便于我们重用各个组件,也便于我们维护开发

在自定义组件的.js文件中 :

properties 是组件的属性列表,是外部传给内部的数据,定义时要定义类型和默认值

eg.

  1. properties: {
  2. segementItems:{
  3. type: Array,
  4. value: []
  5. }
  6. },

methods是组件的方法列表,组件所用到的处理函数都写在里面

eg.

  1. methods: {
  2. _handlerTap:function(evt){
  3. let cid = evt.currentTarget.id
  4. this.setData({
  5. currentIndex: cid
  6. })
  7. //触发一个自定义事件,并且把数据传递出去
  8. this.triggerEvent("selectChange",{currentIdx: cid},{})
  9. }
  10. }

外部在引用组件的时候需要现在.json文件中声明组件的引用eg.

  1. {
  2. "usingComponents": {
  3. "segementBar(引用组件名)":"/compenent/segementBar/segementBar(组件路径)"
  4. }
  5. }

组件的样式于外部一般来说是分离开的,在外部定义的组件样式不会对组件的样式进行修改

slot标签(插槽):

slot标签用在组件内部,为外部在组件内部添加的标签预留位置,设置插槽可以直接在外部对组件内部的内容进行修改,省去传递数值的麻烦。

默认情况下,一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时,可以在组件 js 中声明启用。

  1. Component({
  2. options: {
  3. multipleSlots: true // 在组件定义时的选项中启用多slot支持
  4. },
  5. properties: { /* ... */ },
  6. methods: { /* ... */ }
  7. })

此时,可以在这个组件的 wxml 中使用多个 slot ,以不同的 name 来区分。

  1. <!-- 组件模板 -->
  2. <view class="wrapper">
  3. <slot name="before"></slot>
  4. <view>这里是组件的内部细节</view>
  5. <slot name="after"></slot>
  6. </view>

使用时,用 slot 属性来将节点插入到不同的 slot 上。

  1. <!-- 引用组件的页面模板 -->
  2. <view>
  3. <component-tag-name>
  4. <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
  5. <view slot="before">这里是插入到组件slot name="before"中的内容</view>
  6. <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
  7. <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  8. </component-tag-name>
  9. </view

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/720077
推荐阅读
相关标签
  

闽ICP备14008679号