视图容器组件

view

view是最常用的视图容器组件，相当于HTML页面的<div>标签，推荐使用flex布局。

示例代码

wxml:

<view class="section">
    <view class="section_title">flex-direction：row</view>
    <view class="flex-wrp" style="flex-direction:row;justify-content:center">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
    </view>
</view>

<view class="section">
    <view class="section_title">flex-direction：column</view>
    <view class="flex-wrp" style="flex-direction:column;align-items:center;">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
    </view>
</view>

wxss:

.flex-wrp{
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.bc_green{
    background-color: green;
}
.bc_red{
    background-color: red;
}
.bc_blue{
    background-color: blue;
}
.bc_yellow{
    background-color: yellow;
}

效果图：
这里写图片描述

图(1)

scroll-view

属性表

可滚动视图区域的属性参见表1：

表1 srcoll-view组件属性及描述

属性名类型默认值说明
scroll-xBooleanfalse允许横向滚动
scroll-yBooleanfalse允许纵向滚动
upper-thresholdNumber50距顶部/左边多远时（单位px），触发scrolltoupper事件
lower-thresholdNumber50距底部/右边多远时（单位px），触发scrolltolower事件
scroll-topNumber设置竖向滚动条位置
scroll-leftNumber设置横向滚动条位置
scroll-into-viewString值应为某子元素id，则滚动到该元素，元素顶部对其滚动区域顶部
bindscrolltoupperEventHandle滚动到顶部/左边，会触发scrolltoupper事件
bindscrolltolowerEventHandle滚动到底部/右边，会触发scrolltolower事件
bindscrollEventHandle滚动时触发，event.detail={scrollLeft,scrollTop,scrollHeight,scrollWidth,deltaX,deltaY}

使用竖向滚动是，需要给<scroll-view/>一个固定高度，通过WXSS设置height。

实例代码

wxss：

<view class="section">
  <view class="section_title">vertical scroll</view>
  <scroll-view scroll-y="true" style="height: 200px" bindscrolltoupper="upper" bindscrolltolower="lower"
               bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
    <view id="green" class="scroll-view-item bc_green"></view>
    <view id="red" class="scroll-view-item bc_red"></view>
    <view id="yellow" class="scroll-view-item bc_yellow"></view>
    <view id="blue" class="scroll-view-item bc_blue"></view>
  </scroll-view>
  <view class="btn-area">
    <button size="mini" bindtap="tap" style="width:100%">click me to scroll into view</button>
    <button size="mini" bindtap="tapMove" style="width:100%">click me to scroll</button>
  </view>
</view>
<view class="section section_gap">
  <view class="section_title">horizontal scroll</view>
  <scroll-view class="scroll-view_H" scroll-x="true"
               style="width: 100%">
    <view id="green" class="scroll-view-item_H bc_green"></view>
    <view id="red" class="scroll-view-item_H bc_red"></view>
    <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
    <view id="blue" class="scroll-view-item_H bc_blue"></view>
  </scroll-view>
</view>

js：

var order = ['red', 'yellow', 'blue', 'green', 'red'];
Page({
  data: {
    toView: 'red',
    scrollTop: 100,
    text: "Page scrollLearn"
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  },



  upper: function (e) {
    console.log("up")
  },
  lower: function (e) {
    console.log('low')
  },
  scroll: function (e) {

  },
  tap: function (e) {
    for (var i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1]
        })
        break
      }
    }
  },
  tapMove: function (e) {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})

wxss：

.flex-wrp {
  display: flex;
  background-color: #FFFFFF;
}

.flex-item {
  width: 100px;
  height: 100px;
}

.scroll-view_H {
  white-space: nowrap;
  background-color: #FFFFFF;
  height: 100px;
}

.bc_green {
  display: flex;
  background-color: green;
  align-items: center;
}

.bc_red {
  background-color: red;
}

.bc_blue {
  background-color: blue;
}

.scroll-view-item_H {
  display: inline-block;
  width: 200px;
  height: 100px;
}

.bc_yellow {
  background-color: yellow;
}

.scroll-view-item {
  height: 100px;
}

/*去掉滚动条*/
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

效果图：
这里写图片描述

图(2)

表单组件

button

属性表

表2 button组件属性及描述

属性名类型默认值说明
sizeStringDefault有效值包括：default、mini
typeStringdefault按钮的杨氏类型，有效值包括：primary、default、warn
plainBooleanfalse按钮是否镂空，背景色透明
disabledBooleanfalse是否禁用
loadingBooleanfalse名称前是否带loading图标
form-typeString无有效值包括：submit、reset，用于<form/>组件，点击分别会触发submit/reset事件
hover-classStringbutton-hover制定按钮按下去的样式类。当hover-class=”none”时，表示没有点击态效果

示例代码

wxml：

<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"
disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover">default</button>
<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
disabled="{{disabled}}" bindtap="primary">primary</button>
<button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}"
disabled="{{disabled}}" bindtap="warn">warn</button>
<button bindtap="setDisabled">点击设置以上按钮disabled属性</button>
<button bindtap="setPlain">点击设置以上按钮plain属性</button>
<button bindtap="setLoading">点击设置以上按钮loading属性</button>

js：

var types = ['default','primary','warn']
var pageObject = {
  data:{
    text:"Page buttonLearn",
    defaultSize: 'default',
    warnSize: 'default',
    disabled: false,
    plain: false,
    loading: false
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  setDisabled: function(e) {
    this.setData({
      disabled: !this.data.disabled
    })
  },
  setPlain:function(e) {
    this.setData({
      plain: !this.data.plain
    })
  },
  setLoading: function(e) {
    this.setData({
      loading:!this.data.loading
    })
  }
}
Page(pageObject)
for(var i=0; i < types.length; ++i) {
  (function(type) {
    pageObject[type] = function(e) {
      var key = type + 'Size'
      var changedData = {}
      changedData[key] = 
      this.data[key] === 'default' ? 'mini' : 'default'
      this.setData(changedData)
    }
  })(types[i])
}

wxss：

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

.textStyle {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.textContainer {
  margin-top: 200px;
}
.button-hover {
  background-color: red;
}
.other-button-hover {
  background-color: blue;
}

效果图：
这里写图片描述

图(3)

input

属性表

表3 input组件属性及描述

属性名类型默认值说明
valueString输入框的内容
typeStringtextinput的类型，有效值包括：text、number、idcard、digit、time、date
passwordBooleanfalse是否是密码类型
placeholderString输入框为空时占位符
placeholder-styleString指定placeholder的样式
placeholder-classStringinput-placeholder指定placeholder的样式类
disabledBooleanfalse是否禁用
maxlengthNumber140最大输入长度，设置为0时不限制最大长度
auto-focusBooleanfalse自动聚焦，拉起键盘。页面中只能有一个<input/>设置auto-focus的属性
focusBooleanfalse获取焦点（开发工具暂不支持，要看效果只能用手机预览模式）
bindchangeEventHandle输入框是去焦点时，触发bindchange事件，event.detail={value:value}
bindinputEventHandle除了date/time类型外的输入框，当键盘输入时，触发inptu事件，event.detal= {value:value}，处理函数可以直接return一个字符串，将替换输入框中的内容
bindfocusEventHandle输入框聚焦时触发，event.detail={value:value}
bindblurEVentHandl输入框失去焦点时触发，event.detal={value:value}

实例代码

wxml：

<view class="section">
  <input placeholder="这是一个可以自动聚焦的input" auto-focus />
</view>
<view class="section">
  <input placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
  <view>
    <button bindtap="bindButtonTap">使得输入框获取焦点</button>
  </view>
</view>
<view class="section">
  <input maxlength="10" placeholder="最大输入长度10" />
</view>
<view class="section">
  <view class="section_title">你输入的是：{{inputValue}}</view>
  <input bindinput="bindKeyInput" placeholder="输入同步到view中" />
</view>
<view class="section">
  <input bindinput="bindReplaceInput" placeholder="连续两个1会变成2" />
</view>
<view class="section" >
  <input bindinput="bindHideKeyboard" placeholder="输入123自动收起键盘" />
</view>
<view class="section" >
  <input password type="number" />
</view>
<view class="section" >
  <input password type="text" />
</view>
<view class="section" >
  <input type="digit" placeholder="带小数点的数字键盘"/>
</view>
<view class="section" >
  <input type="idcard" placeholder="身份证输入键盘" />
</view>
<view class="section" >
  <input placeholder-style="color:red" placeholder="占位符字体是红色的"/>
</view>

js：

Page({
  data:{
    text:"Page inputLearn",
    focus: false,
    inputValue: ''
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  bindButtonTap: function() {
    this.setData({
      focus: Date.now()
    })
  },
  bindKeyInput: function (e) {
    this.setData({
      inputValue:e.detail.value
    })
  },
  bindReplaceInput: function(e) {
    var value = e.detail.value
    var pos = e.detail.curos
    if(pos != -1) {
      //光标在中间
      var left = e.detail.value.slice(0,pos)
      //计算光标的位置
      pos = left.replace(/11/g,'2').length
    }

    //直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置
    return {
      value: value.replace(/11/g,'2'),
      cursor: pos
    }

    //或者直接返回字符串，光标在最后
    //return value.replace(/11/g,'2'),
   },
   bindHideKeyboard: function (e) {
     if (e.detail.value === '123') {
       //收起键盘
       wx.hideKeyboard()
     }
   }
})

wxss：

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

.textStyle {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.textContainer {
  margin-top: 200px;
}

效果图：
这里写图片描述

图(4)

其他组件

其他基本组件还有基础内容组件、互动操作组件、页面导航组件，高级组件还有媒体、地图、画布。因为太多了，这里就不一一举例了，用法大致上都差不多，大家可以查官方api，举一反三。

实例代码源码

github地址：https://github.com/a252937166/winxins2.git

同系列文章目录

微信小程序学习笔记（一）——小程序的快速搭建与入门
微信小程序学习笔记（二）——小程序基本目录结构的配置与数据绑定

# 微信 # 微信小程序
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生