550 小程序阶段3 常见内置组件：Text，Button，View，Image，Input，scroll，共同属性

Text组件

<!--pages/text/text.wxml-->
<!-- 1.基本使用 -->
<text>Hello World\n</text>
<text>你好小程序\n</text>

<!-- 2.seletable: true -->
<!-- 默认情况下,text中的文本长按是不能选中的 -->
<!-- 【模拟器中，不能选中，真机调试可以选中。】 -->
<text selectable='{{true}}'>Hello 哈哈哈\n</text>
<text selectable>Hello 哈哈哈\n</text>

<!-- 3.space: 决定文本空格的大小 -->
<text>Hello World\n</text>
<text space='nbsp'>Hello World\n</text>
<text space='ensp'>Hello World\n</text>
<text space='emsp'>Hello World\n</text>

<!-- 4.decode属性: 是否解码文本 -->
<text decode>5 &gt; 3</text>

Button组件

<!--pages/button/button.wxml-->
<text>pages/button/button.wxml</text>

<!-- 1.button基本使用: block -->
<button>按钮</button>

<!-- 2.size: mini/default -->
<button size='mini'>按钮</button>

<!-- 3.type: primary/default/warn -->
<view>
  <button type='primary' size='mini'>主要</button>
  <button type='default' size='mini'>默认</button>
  <button type='warn' size='mini'>警告</button>
</view>

<!-- 4.plain: true背景透明 【镂空】 -->
<view>
  <button size='mini' plain="{{true}}">按钮</button>
</view>

<!-- 5.disable: true不可以和用户交互 -->
<view>
  <button size='mini' disabled='{{true}}'>按钮</button>
</view>

<!-- 6.loading 【加载效果】 -->
<view>
  <button size='mini' loading='{{true}}'>按钮</button>
</view>

<!-- 7.hover-class: 鼠标按下时的样式 -->
<view>
  <button size='mini' hover-class='hover'>按钮</button>
</view>

<!-- 8.open-type属性 -->
<view>
  <button size='mini' open-type='contact' bindcontact='onBindContact'>客服会话</button>
  <button size='mini' open-type='share'>小程序分享</button>
  <button size='mini' open-type='getUserInfo' bindgetuserinfo='onGetUserInfo'>用户信息</button>
</view> 


// pages/button/button.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  onBindContact() {
    console.log('打开了客服会话')
  },
  onGetUserInfo(e) {
    console.log('获取用户的信息', e)
  }
})

.hover {
  background: red;
}

View组件

<!-- 1.view的基本使用 -->
<view class='box'>哈哈哈</view>
<view>呵呵呵</view>

<!-- 2.hover-class: 当用户按下组件时,显示的样式 -->
<view class='box1' 
      hover-class='hover-view'
      hover-stay-time="{{0}}">
  box1
</view>

<!-- 3.hover-stop-propagation: 阻止祖先组件的点击态 -->
<view class='box2' hover-class='box2-hover'>
  <view class='box1' 
      hover-class='hover-view'
      hover-stay-time="{{0}}"
      >
    box1
  </view>
</view>


/* pages/view/view.wxss */
.box {
  background: red;
}

.box1 {
  width: 100px;
  height: 100px;
  background: #6cc;
}

.hover-view {
  background: orange;
  font-size: 30px;
}

.box2 {
  width: 200px;
  height: 200px;
  background: #66e;
  margin-top: 20px;
}

.box2-hover {
  background: green;
}

Image组件

https://developers.weixin.qq.com/miniprogram/dev/component/image.html

<!-- 1.image的基本使用 -->
<!-- 
  重点:
    1.image组件可以写成单标签,也可以修成双标签
    2.image组件默认有自己的大小: 320x240
    3.image组件时一个行内块级元素(inline-block)
 -->
 <!-- <image/> -->

<!-- 2.src: 本地路径(相对路径/绝对路径)/远程地址 -->
<image src='../../assets/test/hahaha.jpeg'/>
<image src='/assets/test/hahaha.jpeg'/>

<image src='https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg'/>

<!-- 补充: 相册中的图片 -->
<button bindtap='handleChooseAlbum'>选中图片</button>
<image src="{{imagePath}}"/>


<!-- 3.bindload: 监听图片加载完成 -->
<!-- lazy-load: 图片的懒加载 -->
<view>------------------------------</view>
<image wx:for="{{1}}"
       src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"
       bindload='handleImageLoad'
       lazy-load/>

<!-- 4.show-menu-by-longpress: 长按图片出现识别小程序码 -->
<image show-menu-by-longpress
       src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"/>


// pages/image/image.js
Page({
  data: {
    imagePath: ''
  },
  handleChooseAlbum() {
    // 系统API, 让用户在相册中选择图片(或者拍照)
    wx.chooseImage({
      success: (res) => {
        // 1.取出路径
        const path = res.tempFilePaths[0]

        // 2.设置imagePath
        // this: undefined
        this.setData({
          imagePath: path
        })
      },
    })
  },
  handleImageLoad() {
    console.log('图片加载完成')
  }
})

input

<!-- 1.input的基本使用 -->
<input/>

<!-- 2.value: input中的默认值 -->
<input value='哈哈哈'/>

<!-- 3.type: 决定键盘类型(文本输入键盘/数字/身份证) -->
<input type='number'/>

<!-- 4.password: 暗文 -->
<input password/>

<!-- 5.placeholder: 占位文字 -->
<input placeholder='请输入内容'/>

<!-- 6.input绑定事件 -->
<input bindinput='handleInput'
       bindfocus='handleFocus'
       bindblur='handleBlur'/>

// pages/input/input.js
Page({
  data: {

  },
  handleInput(event) {
    console.log('用户输入内容:', event)
  },
  handleFocus(event) {
    console.log('input获取焦点:', event)
  },
  handleBlur(event) {
    console.log('input失去焦点:', event)
  }
})

scroll-view组件介绍

<!-- 1.水平滚动: scroll-x -->
<!-- view是块级元素 -->
<scroll-view class='container1' scroll-x>
  <view wx:for="{{10}}" class='item1'>{{item}}</view>
</scroll-view>

<!-- 2.垂直滚动: scroll-y -->
<scroll-view class='container2' scroll-y>
  <view wx:for="{{10}}" class='item2'>{{item}}</view>
</scroll-view>

<!-- 3.其他补充 -->
<scroll-view class='container2' 
             scroll-y
             bindscroll="handleScroll">
  <view wx:for="{{10}}" class='item2'>{{item}}</view>
</scroll-view>


/* pages/scroll/scroll.wxss */
.container1 {
  background: #ccc;
  white-space: nowrap;
}

.item1 {
  width: 100px;
  height: 100px;
  background: #6cc;
  margin: 10px;
  display: inline-block;
}

.container2 {
  background: pink;
  height: 200px;
  margin-top: 20px;
}

.item2 {
  height: 100px;
  background: yellowgreen;
  margin: 10px;
}

// pages/scroll/scroll.js
Page({
  data: {

  },
  handleScroll(event) {
    console.log('正在滚动', event)
  }
})

共同属性

posted on 2020-09-24 10:38  冲啊！  阅读(175)  评论(0)  编辑  收藏  举报

导航