微信小程序基础之常用控件text、icon、progress、button、navigator

今天展示一下基础控件的学习开发，希望对大家有所帮助，转载请说明~

首先延续之前的首页界面展示，几个跳转navigator的使用，然后是各功能模块的功能使用

一、text展示

使用按钮，进行文字的添加与减少，代码如下：

<!--.wxml-->
<view class="viewTitle">
    <text class="titleName">text展示</text>
</view>
<view class="btn-area">
    <view class="body-view">
        <text>{{text}}</text>
        <button bindtap="add">添加文字</button>
        <button bindtap="remove">减少文字</button>
    </view>
</view>

JS交互操作：

//初始化一个文字参数
var initText = '这是第一个文字\n这是第二个文字'
Page({
  data: {
    text: initText
  },
  //初始化一个空的文字串
  extraLine: [],
  //添加按钮点击事件
  add: function(e) {
    //在文字串中添加文字，push
    this.extraLine.push('添加的其他文字')
    //设置数据
    this.setData({
      text: initText + '\n' + this.extraLine.join('\n')
    })
  },
  //减少按钮点击事件
  remove: function(e) {
    //判断文字串是否大于0，如果大于0，减少，反之，不操作
    if (this.extraLine.length > 0) {
      //在文字串中减少文字，pop
      this.extraLine.pop()
      //设置数据
      this.setData({
        text: initText + '\n' + this.extraLine.join('\n')
      })
    }
  }
})

二、icon展示，显示系统自带的样式，同时可以修改图标的大小

<!--.wxml-->
<view class="viewTitle">
  <text class="titleName">icon展示</text>
</view>
<view class="group">
  <view>icon大小样式</view>
  <!--可以使用wx:for-index指定数组当前下标的变量名，
  wx:for用在<blcok/>标签上，以渲染一个包含多节点的结构块（如：多控件）-->
  <block wx:for="{{iconSize}}">
      <icon type="success" size="{{item}}"/>
  </block>
</view>    
<view class="group">
  <view>icon类型</view>
  <block wx:for="{{iconType}}">
    <icon type="{{item}}" size="45"/>
  </block>
</view>
<view class="group">
  <view>icon颜色样式</view>
  <block wx:for="{{iconColor}}">
    <icon type="success" size="45" color="{{item}}"/>
  </block>
</view>

JS交互操作：

//.js
Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
    ],
    iconType: [
      'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn',
      'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download',
      'info_circle', 'cancel', 'search', 'clear'
    ]
  }
})

三、progress展示，进度条的样式设计

<!--.wxml-->
<view class="viewTitle">
    <text>progress进度条展示</text>
</view>
<view class="section section_gap">
  <!--显示百分比的样式-->
  <progress percent="20" show-info/>
  <!--动画显示的样式-->
  <progress percent="40" active/>
  <!--设置宽度的样式-->
  <progress percent="60" stroke-width="10"/>
  <!--设置颜色的样式-->
  <progress percent="80" color="#10AEFF"/>
</view>

四、navigator导航展示：分两种形式，1.跳转到新的界面，2.当前界面跳转

<view class="viewTitle">
    <text class="titleName">navigator展示</text>
</view>
<view class="viewName" style="height:100px">
  <navigator url="OnePage" hover-class="navigator-hover">
    <button type="default">跳转到新页面</button>
  </navigator>
  <navigator url="TwoPage"
  redirect hover-class="other-navigator-hover">
    <button type="default">在当前页打开</button>
  </navigator>
</view>

五、button按钮展示不同样式，设计方式

<!--pages/index/Component/Button/Button.wxml-->
<view class="viewTitle">
    <text class="titleName">button展示</text>
</view>
<view class="button-wrapper">
  <button type="default" size="{{defaultSize}}" loading="{{loading}}"
   plain="{{plain}}" disabled="{{disabled}}" bindtap="default">默认样式
  </button>
</view>
<view class="button-wrapper">
  <button type="primary" size="{{primarySize}}" loading="{{loading}}"
        plain="{{plain}}" disabled="{{disabled}}" bindtap="primary">主要样式
  </button>
</view>
<view class="button-wrapper">
  <button type="warn" size="{{warnSize}}" loading="{{loading}}"
        plain="{{plain}}" disabled="{{disabled}}" bindtap="warn">警告样式
  </button>
</view>
<view class="button-wrapper">
  <button bindtap="setDisabled">点击设置以上按钮不可点击</button>
</view>
<view class="button-wrapper">
  <button bindtap="setPlain">点击设置以上按钮plain样式</button>
</view>
<view class="button-wrapper">
  <button bindtap="setLoading">点击设置以上按钮loading属性</button>
</view>
效果图展示：源码下载：https://github.com/hbblzjy/WX-text-icon-progress-button-navigator