首页 > 分享 > 小程序组件之——cover

小程序组件之——cover

花匠小妙招
2024-12-10 08:36

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> 123

是不是很简单然后效果如下：
在这里插入图片描述
忽略博主最帅的事实，我们看效果就好了，前面两个都是用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> 1234

wxss

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

效果图
在这里插入图片描述
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> 12

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

第一个正常的image,如果正常引入成功，可以触发show_success函数。
第二个明显是文件路径错了，会触发show_filed函数。
上图在这里插入图片描述
有趣的是，filed这个事件竟然先被执行，但是大家不要被误导，这是个意外，多数情况下，还是成功的事件先被执行（我刷新了n多次，都是success在前面（因为它被写在前面，当然，我说的是wxml））

我把两个代码调个位置，会发现，图片加载失败也会占个位置。哎，其实在开发中，知道上面的就完全够用了，但是一个组件想要被吃透，你得花很久的时间的。所以，出门聊天，千万别说自己精通哪门语言，再自信都不行。
那这两个组件就介绍到这，一般的开发知道这些，完全够用了。下期见！