
遇见0和1
V1
2023/02/09阅读:16主题:全栈蓝
纯CSS实现喵咪小挂件
效果预览
「网页上:」 「小程序中:」 在微信小程序中使用时,将div标签改成view即可。
小程序中封装
如下,在小程序中可封装成组件(方便使用)
1、先在「components」目录下新建一个目录存放该组件。
2、右键上一步新建的目录,选择「新建Component」我这里命名为catSwinging,会在目录下自动生成4个文件。

3、在你要使用该组件的「页面json文件」的「usingComponents」标签内注册组件,或者在「app.json」文件全局注册该组件,这样所有页面都能直接使用。

{
"usingComponents": {
"cat-swinging": "../../components/cat-swinging/catSwinging"
}
}
4、使用封装好的组件:在页面中通过「cat-swinging」标签(或者你在json中自定义的名称)即可。
<view class="cat" bindtap="clickMyCat">
<cat-swinging/>
</view>
.cat{
z-index: 99999;
}
获取源码
在公众号「遇见0和1」窗口回复「猫咪小挂件」即可获取到该完整源码,若分享链接失效或有其他问题可直接进群反馈获取。
作者介绍

遇见0和1
V1
追风赶月莫停留,平芜尽处是春山!