用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

小程序自定义评分组件 template(精度0.1)

Rolan 2017-11-18 00:36

网上一直再埋怨小程序没有组件化,现在小程序升级了,提供了自定义组件 Component,目前处于公测阶段。今天体验一回,将之前使用 template 写的评分组件重写了下。 小程序自定义评分组件 template(精度0.1) ... ...

网上一直再埋怨小程序没有组件化,现在小程序升级了,提供了自定义组件 Component,目前处于公测阶段。今天体验一回,将之前使用 template 写的评分组件重写了下。 
小程序自定义评分组件 template(精度0.1)

从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。

自定义组件

自定义组件类似页面,由 json wxml wxss js 4个文件组成。

1、rating.json 
必需在 json 文件中声明为组件

  1. {
  2. "component": true
  3. }

2、rating.wxml 
wxml 文件中编写布局

  1. class='com-rating'>
  2. class='rating-icon' wx:for='{{[1,2,3,4,5]}}' wx:key='*this'
  3. bindtap='_handleTap' data-num='{{item}}'>
  4. class='rating-on' style='width:{{rating >= (max/5)*item ? 1 : rating < (max/5)*(item-1) ? 0 : (rating*10)%(max/5*10)/(max/5*10)}}em'>
  5. src='./../../images/rating_on_icon.png' mode='widthFix' style='width:1em' />
  6. class='rating-off' style='width:1em;'>
  7. src='./../../images/rating_off_icon.png' mode='widthFix' style='width:1em' />

3、rating.wxss 
修饰组件样式

  1. .com-rating {
  2. display: inline-block;
  3. letter-spacing: .3em;
  4. position: relative;
  5. }
  6. .com-rating .rating-icon,
  7. .com-rating .rating-on,
  8. .com-rating .rating-off {
  9. display: inline-block;
  10. }
  11. .com-rating .rating-icon:not(:last-child) {
  12. margin-right: .2em;
  13. }
  14. .com-rating .rating-on {
  15. color: black;
  16. position: absolute;
  17. overflow: hidden;
  18. padding: 0;
  19. margin: 0;
  20. }
  21. .com-rating .rating-off {
  22. color: #DBDBDB;
  23. padding: 0;
  24. margin: 0;
  25. }

4、rating.js 
初始化组件属性及事件

  1. Component({
  2. // 声明组件属性及默认值
  3. properties: {
  4. rating: {
  5. type: Number, // 必需 指定属性类型 [String, Number, Boolean, Object, Array, null(任意类型)]
  6. value: 10
  7. },
  8. max: {
  9. type: Number,
  10. value: 5
  11. },
  12. disabled: {
  13. type: Boolean,
  14. value: false
  15. }
  16. },
  17. // 组件私有和公开的方法,组件所使用的方法需在此声明
  18. methods: {
  19. _handleTap: function (e) {
  20. if (this.data.disabled) return;
  21. const { max } = this.data;
  22. const { num } = e.currentTarget.dataset;
  23. this.setData({
  24. rating: max / 5 * num
  25. })
  26. // 自定义组件事件
  27. this.triggerEvent('change', { value: max / 5 * num }, e);
  28. }
  29. }
  30. })

使用

组件除了在 page 中使用外,在组件中也可以使用。以 page 举例。

1.json 
在 json 文件中需声明组件

  1. {
  2. "usingComponents": {
  3. "com-rating": "/components/rating/rating"
  4. }
  5. }

2.wxml

  1. max="10" rating='6.5' bindchange='handleChange' />

3.js 
在 js 文件中监听事件

  1. /**
  2. *@param {Object} e 组件自定义事件传递的数据
  3. */
  4. handleChange: function(e) {
  5. this.setData({
  6. rating: e.detail.value
  7. })
  8. 邀请
    鲜花
    鲜花
    鸡蛋
    鸡蛋 (1)

    刚表态过的朋友 (1 人)

    分享至 : QQ空间
    收藏
    原作者: 红叶丶秋鸣 来自: 简书

    相关阅读