「小程序JAVA实战」小程序的基础组件(24)

来说下 ,小程序的基础组件。源码https://github.com/limingios/wxProgram.git 中的No.11

基础组件

  • icon图标组件
  • rich-text 富文本组件
  • text 文本组件
  • progress 进度条组件

icon图标组件

  • 官方介绍

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

「小程序JAVA实战」小程序的基础组件(24)

  • 演示用例
<!--icon.wxml-->
<view class="container">
<icon type='success' color='red' size='55'></icon>
<icon type='success_no_circle' size='55'></icon>
<icon type='info' size='55'></icon>
<icon type='warn' size='55'></icon>
<icon type='waiting' size='55'></icon>
<icon type='cancel' size='55'></icon>
<icon type='download' size='55'></icon>
<icon type='search' size='55'></icon>
<icon type='clear' size='55'></icon>
</view>

「小程序JAVA实战」小程序的基础组件(24)

text组件

  • 官方介绍

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

「小程序JAVA实战」小程序的基础组件(24)

  • 演示用例

    text.html

<!--text.wxml-->
<view>
<text selectable='{{true}}'>欢迎关注:编程坑太多</text>
</view>

<view>
<text>欢迎关注:编程坑太多</text>
</view>


<view>
<text space='{{true}}' decode="true">个人博客:    idig8.com</text>
</view>

<view>
<text space='{{false}}'>个人博客:    idig8.com</text>
</view>

<view>
<text decode="true">个人博客:/t/nidig8.com</text>
</view>

「小程序JAVA实战」小程序的基础组件(24)

rich-text 富文本

  • 官方介绍

    >https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

「小程序JAVA实战」小程序的基础组件(24)

  • 演示用例

    rich-text.html

<!--rich-text.wxml-->
<view>
  <rich-text nodes="{{mycontentStr}}"> </rich-text>
  <rich-text nodes="{{mycontentArray}}"> </rich-text>
</view>

rich-text.js

//rich-text.js
//获取应用实例
const app = getApp()

Page({
  data:{
    mycontentStr: '<img class="s_lg_img_gold_show" src="//www.baidu.com/img/bd_logo1.png" width="270" height="129" >',
    mycontentArray:[
      {
        name:"img",
        attrs:{
          class:"s_lg_img_gold_show",
          src:"//www.baidu.com/img/bd_logo1.png",
          width:"270",
          height:"129"
        }
      }
    ]
  }
})

rich-text.wxss

/**icon.wxss**/
.s_lg_img_gold_show{
  width:600rpx;
}

「小程序JAVA实战」小程序的基础组件(24)

使用富文本需要特别注意

「小程序JAVA实战」小程序的基础组件(24)

progress 进度条

  • 官方介绍

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

「小程序JAVA实战」小程序的基础组件(24)

  • 演示用例

    rich-text.html

<!--progress.wxml-->
<view>
  <progress percent="70" show-info="{{true}}" stroke-width="20" color="red" active="{{true}}"></progress>
    <progress percent="{{mypercent}}" show-info="{{true}}" stroke-width="20" color="red" active="{{true}}" active-mode='forwards'></progress>
  <view bindtap='addpercent' >增加进度条百分比</view>
</view>
//progress.js
//获取应用实例
const app = getApp()

Page({
  data:{
    mypercent:15
  },
  addpercent:function(){
    var newpercent = this.data.mypercent+20;
    this.setData({
      mypercent: newpercent
    })
  }
})

「小程序JAVA实战」小程序的基础组件(24)

PS:关于基础组件部分就是这4块,从下次开始咱们一起了解下表单组件

>>原创文章,欢迎转载。转载请注明:转载自IT人故事会,谢谢!

>>原文链接地址:
「小程序JAVA实战」小程序的基础组件(24)

原文 

http://idig8.com/2018/08/12/「小程序java实战」小程序的基础组件(24)/

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » 「小程序JAVA实战」小程序的基础组件(24)

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址