遇见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-index99999;
}

获取源码

在公众号遇见0和1窗口回复猫咪小挂件即可获取到该完整源码,若分享链接失效或有其他问题可直接进群反馈获取。

分类:

前端

标签:

CSS

作者介绍

遇见0和1
V1

追风赶月莫停留,平芜尽处是春山!