小程序基础篇（一）

莫凡是莫烦
244 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

前言

  • 前面简单介绍介绍过小程序的基本使用，下面来了解一些常用的元素和一些案例

一个简单的flex布局（view）

  • 这里view相当于css中的div，要做三个小盒子一排的样式，这里用到四个view(一个大的里面放三个小的)

image.png

//wxml
<view class="container_one">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>
/* pages/list/list.wxss */
.container_one view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container_one view:nth-child(1){
  background-color: green;
}
.container_one view:nth-child(2){
  background-color: red;
}
.container_one view:nth-child(3){
  background-color: skyblue;
}
.container_one{
  display: flex;
  justify-content: space-evenly;
  margin-top: 20px;
}

纵向+横向滚动效果（scroll-view）

  • 这里用到类似滚动条的元素，里面再放几个小view做填充。但是要注意几个点，首先就是方向（scroll-x横，scroll纵），其次展现的容器大小，最后横向的话要注意写wxss将纵向布局变成横向

横向效果

image.png

<scroll-view class="scroll_horizontal" scroll-x>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

.scroll_horizontal{
  /* height: 100px; */
  width: 150px;
  height: 100px;
  white-space: nowrap;
  margin-top: 20px;
  border: 1px solid #000;
}
.scroll_horizontal view{
  display: inline-block;
}

这里要让块级元素view变成行内块，接着让scroll-view设置不换行。横向要设定width的长度

纵向效果

image.png

<scroll-view class="scroll_vertical" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

.scroll_vertical{
  margin-top: 20px;
  height: 120px;
}

纵向的相对简单，只要设置scroll-y以及height高度即可

一个简单的走马灯（swipper+swipper-item）

  • 与我们一般的走马灯原理基本类似,在swipper-item内放入view设置里面的内容即可

image.png

<swiper class="swipper_container" indicator-dots="true" autoplay="true">
<swiper-item>
  <view>A</view>
</swiper-item>
<swiper-item>
  <view>B</view>
</swiper-item>
<swiper-item>
  <view>C</view>
</swiper-item>
</swiper>

.swipper_container{
  height: 100px;
}
.swipper_container view{
  height: 100%;
  text-align: center;
  line-height: 100px;
}
.swipper_container swiper-item:nth-child(1) view{
  background-color: lightgreen;
}
.swipper_container swiper-item:nth-child(2) view{
  background-color: pink;
}
.swipper_container swiper-item:nth-child(3) view{
  background-color: skyblue;
}

text与text-rich

  • 长按复制实现(selectable是关键)

image.png

<text selectable>长按复制</text>
  • 给文字来点UI效果（nodes里写效果）
<rich-text nodes="<em style='color:red'>你看看哄哄不哄"></rich-text>

image.png

button

-不同于一般的button元素它带了一些效果只要加相关属性即可实现

  1. 大小（mini和default）

default：居中，mini:紧靠左侧（要手动写代码居中）

image.png

<button class="size_default">一般按钮</button>
<view style="text-align: center;">
  <button size="mini" >小按钮</button>
</view>
  1. 按钮的样式类型（type）
合法值说明
primary绿色
default白色
warn红色

image.png

<button type="primary">正常</button>

  1. 按钮镂空，禁止按下，loading图标

image.png <button type="warn" plain> 警告</button>

image.png

<button type="primary" loading="true">正常</button>

image.png <button type="default" disabled>默认</button>

navigator(相当于a标签)

<navigator url="../index/index">首页</navigator>

  • 一开始我以为路径和a标签写法完全一致，实则不然第一个index是index文件夹，第二个index是index.wxml

image的mode属性

scaleToFill（默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。(会留白)
aspectFill缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。（少一部分）
widthFix缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
avatar
文章
阅读
粉丝