首页 > 其他分享 >P11_组件-button和image组件的基本用法

P11_组件-button和image组件的基本用法

时间:2023-01-08 17:46:25浏览次数:45  
标签:主色调 button P11 mode 按钮 组件 image

  1. 其它常用组件
    1. button
      • 按钮组件
      • 功能比 HTML 中的 button 按钮丰富
      • 通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
    2. image
      • 图片组件
      • image 组件默认宽度约 300px、高度约 240px
    3. navigator(后面课程会专门讲解)
      • 页面导航组件
      • 类似于 HTML 中的 a 链接
  2. button 按钮的基本使用
    图片详情

text.wxml

<!--pages/text/text.wxml-->
<view>~~~~通过 type 指定按钮类型~~~~~</view>
<button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">告警按钮</button>

<view>size="mini" 小尺寸按钮~</view>
<button size="mini">默认按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">告警按钮</button>

<view>plain 镂空按钮~</view>
<button size="mini" plain>默认按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>告警按钮</button>

  1. image 组件的基本使用
    图片详情
  2. image 组件的 mode 属性
    image 组件的 mode 属性用来指定图片的裁剪和缩放模式,常用的 mode 属性值如下:
    图片详情

image.wxml

<!--pages/image/image.wxml-->
<image></image>
<image src="/images/1-tuya.png" mode="aspectFit"></image>

image.wxss

/* pages/image/image.wxss */
image {

border: 1px solid red;

}

标签:主色调,button,P11,mode,按钮,组件,image
From: https://www.cnblogs.com/xiaopengmvp520/p/p11zu-jianbutton-heimage-zu-jian-de-ji-ben-yong-f

相关文章

  • P8_组件-view和scroll-view组件的基本用法
    组件小程序中组件的分类小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了9大类,分别是:视图容器基础内容......
  • P9_组件-swiper和swiper-item的基本用法
    swiper和swiper-item组件的基本使用实现如图的轮播图效果:swiper组件的常用属性list.wxml<swiperclass="swiper-container"indicator-dotsautoplayinterv......
  • P10_组件-text和rich-text组件的基本用法
    常用的基础内容组件text文本组件类似于HTML中的span标签,是一个行内元素rich-text富文本组件支持把HTML字符串渲染为WXML结构text组件的基本使用......
  • P11_组件-button和image组件的基本用法
    其它常用组件button按钮组件功能比HTML中的button按钮丰富通过open-type属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)image......
  • vue组件的对象式写法,vue中的h函数
    render:将虚拟dom转为真实domh函数:创建的是vnode,也可以成为createVnode函数语法:h(元素名称,这个元素的数据,子集)第一个参数:可以为一个html标签,一个组件,一个异步组......
  • ExtJS-自定义组件的UI
    转载请注明出处:https://www.cnblogs.com/cqpanda/p/17031484.htmlExtJS教程汇总:https://www.cnblogs.com/cqpanda/p/16328016.html更新记录2023年1月6日从笔记迁移到......
  • Vue组件之间的通信方式都有哪些?
    一、组件间通信的概念我们通常把组件间通信这个词进行拆分组件通信都知道组件是vue最强大的功能之一,vue中每一个.vue我们都可以视之为一个组件通信指的是发......
  • Vue 注册全局组件的方式
    一、语法:Vue的实例.component("组件名称",组件)1、方式一:这个组件就是vue文件import{createApp,h}from'vue'//引入创建vue实例的apiimportAppfrom'./App.vue......
  • JavaWeb三大组件之监听器-Listener
    1.JavaWeb三大组件Servlet程序,Listener监听器,Filter过滤器2.Listener监听器监听某种变化(生命周期监听,属性变化监听),做出反应--触发对应方法完成相应任务;监听器实现接口......
  • Vue3 中的组件 provide和inject 传值、获取组件实例的方法getCurrentInstance()
     一、 provide和inject1:在父级组件中提供数据     语法:provide('提供给子组件的变量名',提供给子组件的数据)   2:在子级组件中获取收据  ......