时间:2020-05-06 18:38作者:admin来源:未知人气:374我要评论(0)
今天,我们来讲讲如何调用小程序的常用组件。
首先,我们需要准备的是,把微信开发者工具打开来。
可以看到小编的这张图,文字在上方居中对齐,这里的样式代码是:“.box{margin:1px;text-align:center;}” 这边可以解释一下,margin的属性意思是样式和第一行的距离长短,text-align:center是属性意思是居中,当然了,也有居左和居右,改成left和right就好了。
参考代码:
.box{
margin:1px;
text-align:center;
}
其实学过html和css的小伙伴们都知道,编程是靠代码实现的,html的代码我们可以去w3cschool里面查到,而这个小程序的编写代码我们则可以去微信小程序的公共开发平台查看到。
这里面有很多的组件,我们将会慢慢来学习。
小程序里的这个组件在前一讲已经说了那么一点点,这个组件类似于html里的div标签,却是高于div标签的,可以说是一种意义上的升级。
在这个微信开放文档里我们可以看到,这个view有四个属性,那么,这些属性是什么意思呢?随小编来一个个的看。
这个属性没什么太多说的,是很重要的,属于地基的内容,没有这个,块元素无法实现跳转。
第一步,先在<view>里面加个框,一个长和宽都为200px像素的黄色实心框
第二步,输入hover-class="boxhover"。我们待会还需要对这个boxhover设置样式。
第三步,我们回到wxss里面,对刚才设定的样式“boxhover”进行设置,小编这里设置了个棕色,希望能点击后按钮可以变成棕色。
参考代码:
.boxhover{
background: burlywood;
}
最后,现在我们点击一下就可以完成按钮变化颜色了。
好的,在这里,我们将hover-stay-time的时间设置为0,hover-stay-time设置为10,停留的时间原本默认是400毫秒。
全代码如下:
<view class="box" hover-class="boxhover" hover-start-time="0" hover-stay-time="10">
小程序开发</view>
首先呢,我们来到index.wxml界面里面,修改一下代码,嗯,在里面加个嵌套。
加的嵌套:
<view class="item">view标签嵌套</view>
第二步,我们在index.wxss里面加个样式。
可以设置的样式代码:
.item{
width: 100px;
height: 100px;
background: rebeccapurple;
}
一个高和宽均为100像素的紫色背景的方块。
第三步,我们在index.wxml里面刚才嵌套的里面加个hover-class=“itemhover”如图所示。
第四步,根据刚才的设定,下面我们需要对这个样式进行规范。
搞个代码:
.itemhover{
background: gray;
}
然后当你单击这个小方块的时候,外部的大方块的颜色也会随之发生改变。
那么,我们该如何设置让小方块颜色变而大方块颜色不变呢?这个时候的这个属性就有效果了。
hover-stop-propagation,将这个放到刚才嵌套的内容里面去,就实现了。
这样,你不管怎么点击,都不会影响外部大块的变化。
我们今天讲了view组件里面四个属性的使用方法,接下来我们会讲其他组件的属性使用方法,小程序是我们生活中很常用的软件,学好它,可以帮助我们很多的事情。
相关阅读 万彩动画大师怎么添加一个场景的进场特效剪映怎么提速视频声音不变调剪映怎么压缩视频大小剪映如何设置视频的区域范围mindmaster如何使用分支箭头样式功能mindmaster如何给主题添加优先级图标mindmaster怎么在两个框框之间添加一个框框美图秀秀怎么把照片变成黑白美图秀秀镜面翻转怎么弄美图秀秀如何消除红眼
热门文章 电脑上圈11怎么打_⑪_圈11如何输入?A4纸与16K纸的区别如何利用“工信部12300”微信公众号投诉移动、联通、电信的方法海康摄像头忘记密码,自己如何快速重置密码
最新文章
万彩动画大师怎么添加一个场景的进场特效剪映怎么提速视频声音不变调
剪映怎么压缩视频大小剪映如何设置视频的区域范围mindmaster如何使用分支箭头样式功能mindmaster如何给主题添加优先级图标
人气排行 电脑上圈11怎么打_⑪_圈11如何输入?A4纸与16K纸的区别如何利用“工信部12300”微信公众号投诉移动、联通、电信的方法海康摄像头忘记密码,自己如何快速重置密码海康威视网络摄像头接网线的线序与接法Secure Boot安全启动开启关闭方法手动设置IP地址和DNS的方法小米手机 如何安装谷歌服务框架,最简单的方法
盖楼回复X
(您的评论需要经过审核才能显示)
查看所有0条评论>>