小程序组件之——cover-image与image

cover-image与image

没错我们就是从头开始往下撸。有啥就讲啥。外带一些扩展。

聊正题因为是第一个组件,不对,应该说是第一组组件,因为image和cover-image是两个组件,不过因为太像啦,所以就拿出来一起讲。因为是第一组,所以我讲解一下,wxml的代码都写在后缀为wxml中,css代码都写在wxss中,js在后缀是js的文件中,不需要像pc端那样刻意的去引用,只要写好了,系统自己就很聪明,帮你搞定这些事了,前提是文件名相同。

ok,这个东西时间久了 都会用的。咱们聊正事啦,终于开始讲正题啦,憋死我了。

image和cover-image都是在小程序中引入图片的组件(组件你们暂时理解为html标签就好)。当我们希望在页面上放上一些图片,我们就会使用这两个标签之一
代码如下!(图片引入)

<cover-image src="../../assets/images/2.png"></cover-image>
<cover-image src="/assets/images/2.png"></cover-image>
<image src="/assets/images/2.png"></image>

是不是很简单然后效果如下:
在这里插入图片描述
忽略博主最帅的事实,我们看效果就好了,前面两个都是用cover-image引入的图片,最后一个是用image引入的图片,是不是看出差别了?cover-image引入的图片铺满了整个屏幕,image好像没有,不过这是小问题,不是它们最大的差别。
它们最大的差别在于,image是正常使用的图片引入的组件,而cover-image有点强,强在它始终在可视页面的最上层(我就是这条街最靓的仔,谁都挡不住我)。什么时候回发生遮挡呢?比如,定位。有元素定位至图片上方。image会被遮挡,但是cover-image就不会被遮挡。484有点没画面?ok,上代码!
wxml

<cover-image class="img" src="../../assets/images/2.png"></cover-image>
<cover-image class="img" src="/assets/images/2.png"></cover-image>
<image class="img" src="/assets/images/2.png"></image>
<div></div>

wxss

div{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 500px;
	background-color: red;
	z-index: 3;
}
.img{
	z-index: 1;
}

效果图
在这里插入图片描述
emmm。。。效果貌似没啥差别。不过,放下你们手中的锤子镰刀啥的,博主就不是唬人的人,昂,你们放心。差别在那呢?在于,这个效果图是在微信开发者工具上的效果。如果你在手机上看,效果就不一样了,你们看~~~
上面的两个没有被挡住,最后面的image被挡住啦,是不是就很神奇(有些效果在手机上才能看见,很坑啊)。

补充几个小的知识点。

第一,写好了代码要怎么看效果呢?

答案:保存后,工具回自动帮你编译的,也可以设置保存后不能被编译。

第二,怎么从手机上看效果呢?

在这里插入图片描述
点击预览或真机调试,然后扫码,就可以查看效果啦。

第三,拿起小本本记上啊。挺重要的小技巧的。

在上面的cover-image的组件,我用了两个组件,不知道你们会不会困惑。现在给你们解惑。
在引入本地资源的时候,有两种引入的方式。
第一种,相对路径引入。
第二种,绝对路径引入。
基本区别和使用大家都清楚,有一些人不清楚的是,资源的开头中/和./和…/和什么都不填写有什么区别
/代表着根目录的意思,资源从miniprogram文件夹下开始找
./代表着当前目录的意思,和什么都不写没区别。
…/代表着从文件的上一级目录下开始寻找。

还没完,我们还有内容

小内容一、src接受的文件资源可以是本地资源,网图的链接和云文件的fileId(这个后面聊)
接受文件的后缀名包括jpg/png/gif/svg/webp/base64

小内容二、

明明是小内容,为啥这么大?哈哈哈,因为很重要,而且在博客中是第一次讲(组件触发事件)
就是,如果文件加载成功或者失败,我们都可以根据它的一些属性来触发一些事件。
上代码!
wxml

<image src='/assets/images/2.png' bindload='show_success'></image>
<image src='/assets/fileds/2.png' binderror='show_filed'></image>

js

Page({
	show_success(){
		console.log('success')
	},
	show_filed(){
		console.log('filed')
	}
})

第一个正常的image,如果正常引入成功,可以触发show_success函数。
第二个明显是文件路径错了,会触发show_filed函数。
上图在这里插入图片描述
有趣的是,filed这个事件竟然先被执行,但是大家不要被误导,这是个意外,多数情况下,还是成功的事件先被执行(我刷新了n多次,都是success在前面(因为它被写在前面,当然,我说的是wxml))
在这里插入图片描述
我把两个代码调个位置,会发现,图片加载失败也会占个位置。哎,其实在开发中,知道上面的就完全够用了,但是一个组件想要被吃透,你得花很久的时间的。所以,出门聊天,千万别说自己精通哪门语言,再自信都不行。
那这两个组件就介绍到这,一般的开发知道这些,完全够用了。下期见!

上一篇:认识微信开放文档                                          下一篇:cover-view\view与text

  • 11
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值