微信小程序学习笔记(2)

1、view

相当于div ,是一个块级元素

2、scroll-view

  • 可滚动的试图区域
  • 常用来实现滚动列表

由于代码高亮的显示,本文中 html 代表 wxmlwxss 代表 wxss

<!--pages/list/list.wxml-->
<scroll-view class="container1" scroll-y>
    <view>A</view>
    <view>B</view>
    <view>C</view>
</scroll-view >
/* pages/list/list.wxss */
.container1 view{
	width: 100px;
	height: 100px;text-align: center;
	line-height: 100px;
}

.container1 view:nth-child(1){
	background-color: aqua;
}
.container1 view:nth-child(2){
	background-color: blueviolet;
}
.container1 view:nth-child(3){
	background-color: chartreuse;
}

.container1{
	display: flex;
	justify-content: space-around;
}
.container1{
	border: 1px solid black;
	width: 100px;
	height: 120px;
}
scroll-x /* 允许横向滚动 */
scroll-x /* 允许纵向滚动 */

3、swiper 和 swiper-item

  • 轮播图容器组件 和 轮播图 item 组件
  • 轮播图是滑动转换
<swiper class="swiper-container">
	<swiper-item>
		<view class="item">A</view>
	</swiper-item>
	<swiper-item>
		<view class="item">B</view>
	</swiper-item>
	<swiper-item>
		<view class="item">C</view>
	</swiper-item>
</swiper>
.swiper-container{
	height: 150px;
}
.item{
	height: 100%;
	line-height: 150px;
	text-align: center;
}
swiper-item:nth-child(1) .item{
	background-color: brown;
}
swiper-item:nth-child(2) .item{
	background-color: skyblue;
}
swiper-item:nth-child(3) .item{
	background-color: gold;
}

在这里插入图片描述

4、text

添加 selectable 属性即可,是布尔值,默认 false

<view>
    长按选中效果
    <text selectable>123456678</text>
</view>

rich-text:通过nodes属性节点,将THML标签渲染为对应的UI结构

<rich-text nodes="<h1 style='color:red;'>标题</h1>">
</rich-text>

5、button

在这里插入图片描述

<!--  -->
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<!-- 小尺寸  size -->
<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<!-- 镂空 plain -->
<button size="mini" plain>普通按钮镂空</button>
<button type="primary" size="mini" plain>主色调按钮镂空</button>
<button type="warn" size="mini" plain>警告按钮镂空</button>

6、image

图片属性

<image src="" mode=""/>

在这里插入图片描述

-------------------------------------------------------------

1、< movable-view>

该组件可以在页面中拖拽滑动,不能单独使用,必须放在 < movable-area > 中

movable-area 属性:
	scale-area: /* 当 movable-view 支持双指缩放的时候,设置此值可将放缩手势生效为整个 movable-area 区域
movable-area 可自定义 宽高 ,默认为10px
movable-view:
	direction: all | vertical | none | horizeontal /* 移动的方向 */
	scale:是否支持双指缩放
<movable-area scale-area>
	<movable-view direction="all" scale inertia>
	</movable-view>
</movable-area>

2、cover-view

可覆盖在原生组件上的视图容器,包括 map 、 video 、canvas 等,

内部只允许嵌套 cover-view 、 cover-image 、button

<map>
	<cover-view>
		<cover-view>123</cover-view>
		<button>tijioa</button>
	</cover-view>
</map>

3、icon

图标组件

<icon type="" size=""  color=""/>

<icon type="warn"/>
<icon type="success"/>
<icon type="success_no_circle"/>
<icon type="info"/>
<icon type="cancel"/>
<icon type="search"/>
<icon type="clean"/>
<icon type="waiting"/>
<icon type="download"/>

对应图标:在这里插入图片描述

4、text

文本组件,除了文本节点以外的其他节点都无法长按选中

ensp 中文空格大小的一半
emsp 中文空格
nbsp 根据字体设置空格大小

text 组件中只支持 text 嵌套

可设置属性:

<text user-select space decode></text> 
<!-- 文本可选 显示连续空格 是否解码(空格解析) -->

5、rich-text

富文本组件

<rich-text nodes="{{node01}}"></rich-text>
Page({
    data:{
        node01:[{
            name:'div',
            attrs:{
                style:'
                	color:red;
                	line-height:60px;
                '
            },
            children:[{
                type:'text',
                text:'hello word'
            }]
        }]
    }
})
/*
	attrs 中也可以写为 class :'mystyle',指的是本页面中的名为 mystyle 的 css 属性
	node01 也可写为 html 标签的形式,注意用引号引起来

其中,name 指的是标签名字(支持受信任的HTML节点)

attrs 属性,支持受信任的属性,遵循 Pascal 命名法

children 子节点列表,结构和 nodes 一致

6、progress

进度条

<progress percent="50" active/>
<!--
percent 0~100 百分比
show-info false 在进度条右侧显示百分比
storke-width 进度条宽度
activeColor 已选择的进度条颜色
backgroundColor 未选择的进度条颜色
active false 从左往右的动画
active-mode backwards|forwards 从头播放|从上次结束的位置播放

7、lable

<lable>
	<checkbox value='123' checked>admin
</lable><checkbox valu='123' checked  id='app'/>
  <lable for='app'>admin</lable>
    
  效果一样

8、form

三个属性:

report-submit boolean:是否返回 formId

bindsubmit 提交表单时触发 submit 事件,携带的值为 e.detail = { value : { ’ name ’ : ’ admin ’ } , formId : ’ ’ }

bindreset 重置时触发的事件

9、picker

从底部弹起的滚动选择器组件,

目前有,普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认普通选择器

普通选择:

<picker  range="{{info}}" bindchange="select">
	<view>选择的内容为:{{opa}}</view>
</picker>
Page({
    data: {
        info: ['1', '2', '3']
  },
  select: function (res) {
    let i = res.detail.value;
    let value = this.data.info[i];
    this.setData({ opa: value });
  },
})

多列选择:

<picker  mode="multiSelector" range="{{info}}" bindchange="select">
	<view>选择了:{{opa}}</view>
</picker>

Page({
  data: {
    info: [
      ['1', '2', '3'],
      ['a', 'b', 'c']
    ]
  },
  select: function (res) {
    let arrSelect = res.detail.value; //获取选项数组的下标
    let value = this.data.info; //获取原数组
    let arr = new Array(); //新建一个空数组
    for (let j = 0; j < arrSelect.length; j++) {
      let k = arrSelect[j]; // 获取选择了第 j 个数组,第 arrSelect[j] 个位置的值(也就是第 j 个数组中的位置)
      let v = value[j][k];//在原数组中查找第 j 个数组 第 k 个位置的值
      arr.push(v);
    }
    this.setData({
      opa: arr
    });
  },    
})

时间选择

<picker  mode="time"  bindchange="selectTimeHM">
	<view>选择了:{{time}}</view>
</picker>
Page({
    data:{
        time:''
    },
    selectTimeHM:function(e){
        this.setData({time:e.detail.value});
    }
})

日期选择

<picker  mode="date"  bindchange="selectTimeHM">
	<view>选择了:{{time}}</view>
</picker>
Page({
    data:{
        time:''
    },
    selectTimeHM:function(e){
        this.setData({time:e.detail.value});
    }
})

省市区选择

<picker  mode="region"  bindchange="selectTimeHM">
	<view>选择了:{{time}}</view>
</picker>
Page({
    data:{
        time:''
    },
    selectTimeHM:function(e){
        this.setData({time:e.detail.value});
    }
})

10、picker-view

嵌入页面的滚动选择器

<view>
  <view>{{year}}年{{month}}月{{day}}日</view>
  <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
    <picker-view-column>
      <view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
    </picker-view-column>
  </picker-view>
</view>
const date = new Date()
const years = []
const months = []
const days = []
 
for (let i = 1990; i <= date.getFullYear(); i++) {
  years.push(i)
}
 
for (let i = 1; i <= 12; i++) {
  months.push(i)
}
 
for (let i = 1; i <= 31; i++) {
  days.push(i)
}
 
Page({
  data: {
    years: years,
    year: date.getFullYear(),
    months: months,
    month: 10,
    days: days,
    day: 9,
    value: [9999, 9, 8],
  },
  bindChange: function (e) {
    const val = e.detail.value
    this.setData({
      year: this.data.years[val[0]],
      month: this.data.months[val[1]],
      day: this.data.days[val[2]]
    })
  }
})

效果:

在这里插入图片描述

相关推荐

最近更新

  1. dolphinscheduler独立集群部署文档(海豚调度)

    2024-06-10 10:08:05       0 阅读
  2. C# —— 三目运算符及实例

    2024-06-10 10:08:05       0 阅读
  3. python 多线程条件竞争利用失败print不显示的原因

    2024-06-10 10:08:05       0 阅读
  4. 与君共勉:坚持+努力

    2024-06-10 10:08:05       0 阅读
  5. ReentrantLock与AQS:深入剖析多线程同步的艺术

    2024-06-10 10:08:05       0 阅读
  6. 快速上手:如何在npm发布自己的插件包

    2024-06-10 10:08:05       0 阅读

热门阅读

  1. 怎么开发vscode插件

    2024-06-10 10:08:05       4 阅读
  2. WebSocket面试常见知识点和面试题

    2024-06-10 10:08:05       4 阅读
  3. 2024前端面试准备4-Vue相关

    2024-06-10 10:08:05       4 阅读
  4. #10 解决Stable Diffusion常见问题和错误

    2024-06-10 10:08:05       4 阅读
  5. 006 CentOS 7.9 elasticsearch7.10.0安装及配置

    2024-06-10 10:08:05       6 阅读