组件（基础组件概念、基础内容组件、视图容器组件、图片组件、表单组件、导航）

最新推荐文章于 2024-05-02 22:53:03 发布

琴～～

最新推荐文章于 2024-05-02 22:53:03 发布

阅读量2.1k

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/yangyanqin2545/article/details/116376392

版权

一、组件

1.基础组件概念

组件是视图层的基本组成单元。
组件自带一些功能与微信风格一致的样式。
一个组件通常包括 开始标签 和 结束标签，属性 用来修饰这个组件，内容 在两个标签之内。

公共属性：
	每一个组件都有的属性
	id class style hidden bind* catch* data-*
	
特殊属性：
	组件都有各自私有的属性，可以对该组件的功能或样式进行修饰

2.基础内容组件

text 文本组件

<!-- 文本
        user-select 文本是否可选
        space  显示连续空格
        decode  是否解码 &lt；
-->
    <text user-select="{{true}}">床前明月光</text>

    <view><text>疑是     地上霜</text></view>
    <view><text space="nbsp">疑是      地上霜</text></view>
    <view><text space="ensp">疑是      地上霜</text></view>
    <view><text space="emsp">疑是      地上霜</text></view>

    <view><text decode="{{true}}">&lt;</text></view>

icon图标

<!-- 小图标
        type 图标类型  必填 
        size 23    图标大小
        color  图标颜色
-->
<icon type="success" size="50" color="#00f"></icon>
<icon type="search" size="100" color="red"></icon>

rich-text 富文本

<!-- 富文本 -->

<!-- 字符串格式 -->
<rich-text nodes="<div>标题</div>"></rich-text>

<!-- 数组格式 了解 -->
<rich-text nodes="{{arr}}"></rich-text>

    data: {
        arr:[
            {
                name:"h2",
                attrs:{
                    class:"active",
                    style:"color:#f00"
                },
                children:[
                    {
                        type:"text",
                        text:"我是数组格式标题"
                    }
                ]
            },
            
        ]
    }

3.视图容器组件

(1)view 视图容器

代码案例：

<!-- view
        组合其他标签，容器

        hover-class 按下样式类
        hover-start-time 等待xx时间之后再出现点击样式
        hover-stay-time="3000"  点击状态维持多长时间
-->
<view hover-class="active" hover-start-time="2000" hover-stay-time="3000">文字</view>

(2)swiper/swiper-item 滑块视图容器

注意事项: swiper其中只可放置swiper-item组件

代码案例：

<swiper circular="{{true}}"  indicator-dots indicator-color="pink" indicator-active-color="#00f" autoplay="{{true}}" interval="1000" vertical display-multiple-items="2">
    <swiper-item>
        <image src="/imgs/1.jpg"></image>
    </swiper-item>
    <swiper-item>
        <image src="/imgs/2.jpg"></image>
    </swiper-item>
    <swiper-item>
        <image src="/imgs/3.jpg"></image>
    </swiper-item>
</swiper>

封装改变点的样式

代码案例：

<view class="container">
    <swiper bindchange="change" autoplay circular>
        <swiper-item wx:for="{{imgs}}">
            <image src="{{item}}"></image>
        </swiper-item>
    </swiper>
    <view class="dots " >
        <text class="{{index == activeIndex ? 'active' :''}}" wx:for="{{imgs}}">               </text>
    </view>
</view>

    data: {
        imgs:['/imgs/1.jpg','/imgs/2.jpg','/imgs/3.jpg'],
        activeIndex:0
    },
    change(e){
        console.log(e.detail.current);
        this.setData({
            activeIndex:e.detail.current
        })
    },

/* pages/swiper/swiper.wxss */
image{
    width: 100%;
    height: 150px;
}
.container{
    position: relative;
}
.dots{
    position: absolute;
    left: 0;
    bottom: 20rpx;
    width: 100%;
    text-align: center;
}

.dots text{
    display: inline-block;
    width: 60rpx;
    height: 15rpx;
    background-color: #00f;
    margin: 0 5rpx;
}
.dots .active{
    background-color: #f00;
}

(3)scroll-view滚动视图

纵向滚动：

<!-- 注意：竖向滚动时，scroll-view要有高度  -->
<scroll-view scroll-y>
    <view class="red"></view>
    <view class="yellow"></view>
    <view class="pink"></view>
</scroll-view>

.red{
    width: 200px;
    height: 200px;
    background-color: #f00;
}
.yellow{
    width: 200px;
    height: 200px;
    background-color: yellow;
}
.pink{
    width: 200px;
    height: 200px;
    background-color: pink;
}
/* 竖向滚动*/
scroll-view{
    height: 300px;
}

横向滚动：

<!-- 横向滚动时  scroll-view 不换行 子元素转成内联块-->
<scroll-view scroll-x scroll-into-view="id{{index}}">
    <view class="red" id="id0"></view>
    <view class="yellow" id="id1"></view>
    <view class="pink" id="id2"></view>
</scroll-view>

/* 横向滚动*/
scroll-view{
    height: 300px;
    width: 300px;
    //强制不换行
    white-space: nowrap;
}
scroll-view view{
    display: inline-block;
}

4.图片组件 image

lazy-load	boolean	false	否	图片懒加载，在即将进入一定范围（上下三屏）时才开始加载	1.5.0
src	string		否	图片资源地址	1.0.0
show-menu-by-longpress	boolean	false	否	开启长按图片显示识别小程序码菜单	2.7.0
binderror	eventhandle		否	当错误发生时触发，event.detail = {errMsg}	1.0.0
bindload	eventhandle		否	当图片载入完毕时触发，event.detail = {height, width}
mode	scaleToFill			缩放模式裁剪模式

代码案例：

<!-- 
    图片：在这里默认image
        默认宽320px 高240px
        src 引入图片资源
        mode 缩放裁剪模式
 -->
<!-- <image src="/imgs/1.jpg" mode="aspectFit"></image>
<image src="/imgs/1.jpg" mode="aspectFill"></image> -->
<image src="/imgs/1.jpg" mode="widthFix"></image>

<image src="/imgs/1.jpg" show-menu-by-longpress  bindload="_load" lazy-load ></image>


    data: {
        num:0
    },
    _load(){
        this.data.num++
        console.log(this.data.num);
    },

5.表单组件

(1)input输入框

代码案例：

<view>姓名</view>
<!-- 
        input
            默认不显示边框 有闭合标签
            type 手机上键盘输入的类型
                text	文本输入键盘	
                number	数字输入键盘	
                idcard	身份证输入键盘	
                digit	带小数点的数字键盘 

            password

 			bindinput
 			bindconfirm
 			maxlength
                

-->
<input type="text" bindinput="_input" model:value="{{val}}" />

<!-- <input bindinput="_input" bindconfirm="_confirm" type="text" placeholder="请输入你的姓名" placeholder-style="color:red" maxlength="-1" focus="{{true}}" /> -->

<view>密码</view>
<input password focus />

(2)radio单选/radio-group组

代码案例：

    <!-- 单选 -->
    <view>性别：</view>
    <radio-group bindchange="_radioChange" name="sex">
        <radio checked value="1">男</radio>
        <radio value="2">女</radio>
        <radio color="red" value="3">保密</radio>
    </radio-group>

(3)checkbox/checkbox-group组件

代码案例：

    <!-- 多选 -->
    <view>爱好</view>
    <checkbox-group bindchange="_chechChange" name="hobby">
        <checkbox value="1">睡觉</checkbox>
        <checkbox value="2">吃饭</checkbox>
        <checkbox value="3">敲代码</checkbox>
    </checkbox-group>

(4)swicth开关

代码案例：

     <!-- 开关选择器 -->
    <view>
        是否同意联系您本人
        <switch name="isAgree" type="checkbox" bindchange="_switchChange"></switch>
        <switch type="switch"></switch>
    </view>

(5)picker组件

代码案例：

    <view>你的地区：{{region}}</view>
    <picker name="region" mode="region" bindchange="_pickerChange">选择你的地区</picker>

(6)form提交

Tips

1、form 组件 bindsubmit 事件

2、button 组件 form-type="submit"

3、提交的数据要加 name 属性

代码案例：

<!--pages/form/form.wxml-->
<form action="" bindsubmit="_submit">
    .....
    
    <button plain   type="primary" size="mini" form-type="submit">提交</button>
    <button type="warn" form-type="reset">重置</button>
</form>

6.导航

(1)声明式导航（组件）

navigator组件

语法参考

url:跳转的地址
open-type 跳转的方式
	navigate： 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
	redirect: 关闭当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
	switchtab: 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
	relaunch: 关闭所有页面，打开到应用内的某个页面
	navigateBack：返回页面,delta="2"

代码示例：

<navigator url="../form/form" open-type="navigate">
    <button>navigate</button>
</navigator>

<navigator url="../form/form" open-type="redirect">
    <button>redirect</button>
</navigator>

<navigator url="../form/form" open-type="reLaunch">
    <button>reLaunch</button>
</navigator>

<navigator url="../index/index" open-type="reLaunch">
    <button>reLaunch</button>
</navigator>

<navigator url="../form/form" open-type="switchTab">
    <button>switchTab</button>
</navigator>
<navigator url="../index/index" open-type="switchTab">
    <button>switchTab</button>
</navigator>

(2)编程式导航（api）

值	说明	最低版本
navigate	对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能
redirect	对应 wx.redirectTo 的功能
switchTab	对应 wx.switchTab 的功能
reLaunch	对应 wx.reLaunch 的功能	1.1.0
navigateBack	对应 wx.navigateBack 的功能	1.1.0

代码案例：

<button bindtap="tz">api跳转</button>

    tz(){
        // api
        wx.navigateTo({
          url: '/pages/form/form',
        })
    },

(3)页面传递参数

传参

tips:

直接在路径后边以问号 拼接上参数  &

声明式传递参数

<navigator url="../form/form?age=12" open-type="navigate">
    <button>navigate</button>
</navigator>

编程式传递参数：

    tz(){
        // api
        wx.navigateTo({
          url: '/pages/form/form?name='+"zhaosi",
        })
    },

接参

tip:

直接在onLoad中接收一个参数

代码案例：

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        console.log(options);
    },

(4)跳转到其他小程序

代码案例：

<!-- 
    target
    app-id
 -->
<navigator target="miniProgram" app-id="wxbbbc790bdc38a994">
    <button>跳转到其他小程序</button>
</navigator>

琴～～

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
组件（基础组件概念、基础内容组件、视图容器组件、图片组件、表单组件、导航）

一、组件1.基础组件概念组件是视图层的基本组成单元。组件自带一些功能与微信风格一致的样式。一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。公共属性：每一个组件都有的属性 id class style hidden bind* catch* data-* 特殊属性：组件都有各自私有的属性，可以对该组件的功能或样式进行修饰2.基础内容组件text 文本组件<!-- 文本 user-select 文本是否可选
复制链接

扫一扫