小程序组件,小程序自定义组件

2019-10-09 13:20栏目:专项工作
TAG:

最近在开发小程序,有些需要复用的界面模块,为了方便写成了自定义组件,方便以后调用,在这里记录下。其中参考了蘑菇街开源的MinUI组件库和小程序的官方文档,蘑菇街的组件库提供了丰富的组件,有兴趣的同学可以看看。

picker,从底部弹起的滚动选择器。这里只讨论mode=”multiSelector”的格式

官方文档里,swiper的指示点默认是圆形,且只能修改其颜色。如果要修改形状,有两种思路:

下面讲讲开发组件中遇到的问题和该组件的基本用法。PS:如果有同学要用的话

比较难理解的两个属性:range和value的搭配使用。

1.隐藏官方的面板指示点(官方有提供属性可以隐藏),自己用view重写组件

progress组件官方是有提供的,功能也比较齐全,这里主要加了一个渐变前景色的功能,这个组件主要是为了slider组件打底,所以没有加其他的功能,功能基本上和原生的一样。

首先上官方定义:

2.弄清swiper里控制指示点的类,并对其中样式进行修改。

开发和只用组件有几个要注意的点1、在组件的json文件中写上"component": true2、在使用组件的json文件中写上

ag真人 1ag真人 2

ag真人,我们先来第二种,从网上查阅资料可得,相关的类有:

"usingComponents": { "wxzx-progress": "../wxzx-progress/wxzx-progress"}
  1. range必须是二维数组或者二维对象数组。

  2. value是一维数组,用于标记使用者选中了range里的哪几个值。

wx-swiper-dots

其中wxzx-progress 是你组件的名字,可以随便写后面跟上该组件的路径若要引用多个组件,则逗号隔开3、在使用组件的wxml页面使用组件,组件名就是json文件中定义的名字<wxzx-progress></wxzx-progress>

我们先考虑range为二维数组的情形:

wx-swiper-dots-horizontal

下面介绍几个该组件的用法,更多用法请到文末的github地址下载demo

ag真人 3

wx-swiper-dot

 默认 <wxzx-progress></wxzx-progress> 

由此可见,value数组第一项代表的是range中第一个数组里选中的值;value数组第二项代表的是range中第二个数组里选中的值。

wx-swiper-dot-active

ag真人 4默认

range里有多少个数组,意味着value里有多少项

从现行版本的调试工具来看,无论你怎样修改这里的样式,都不能在wxml模块里展示出来。

设置百分比<wxzx-progress percent='90'></wxzx-progress> 

当用户改变picker里的值时,会触及到两个事件:columnchange和change。对应的handle可在bindcolumnchange里、bindchange里填写。还是和以前一样,上官方定义:

所以,考验css基础的时候到了。

ag真人 5百分比

ag真人 6ag真人 7

从网上的代码来看,层级关系为:

设置渐变色 <wxzx-progress active-color='#ff6600, #000000' percent='90'></wxzx-progress> 

两者的区别在于,前者只要改变了某一列的值,哪怕没有真正选择它,都会触发columnchange事件;而后者只有真的选择了(即点击了选择器里的确定键),才能触发change事件。

wx-swiper-dots=wx-swiper-dots-horizontal(为同一个元素的两个类)> wx-swiper-dot

ag真人 8渐变色

现在我们来考虑range为二维对象数组的情形:

当然这只是个人推测,自己重写css时最好直接写这些类名,而不要用那些复杂的选择器。

设置长度 <wxzx-progress active-color="#ff6600" percent='90' width='600'></wxzx-progress>

multiArray: [

注意:实际写的时候一定要给swiper定义一个类,比如swiper-box,然后css格式就成为了:

ag真人 9长度

[{

.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal{…}

下载地址: demo

name: "江苏",

.swiper-box

key: "1"

.wx-swiper-dot{…}

},

目前发现直接写类名修改css样式,不起任何作用。

{

首先第一个问题,就是在swiper-box下的 wx-swiper-dots-horizontal,会失去原来的display:flex属性。。。

版权声明:本文由ag真人发布于专项工作,转载请注明出处:小程序组件,小程序自定义组件