前言

Hello！小伙伴！ 非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～   自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称：海轰 标签：程序猿｜C++选手｜学生 简介：因C语言结识编程，随后转入计算机专业，有幸拿过一些国奖、省奖...已保研。目前正在学习C++/Linux/Python 学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！   机器学习小白阶段 文章仅作为自己的学习笔记 用于知识体系建立以及复习 知其然 知其所以然！

效果展示

Demo代码

js

wxml

wxss

效果展示

Demo代码

js

wxml

wxss

效果展示

静态展示

动态展示

Demo代码

js

wxml

wxss

效果展示

1、原效果图

2、复现效果图

Demo代码

js

wxml

wxss

效果展示

组件设置

步骤1

在pages目录下，新建文件夹components

步骤2

在components下建立新文件夹swiper

在swiper目录下，新建4个文件，分别为

• swiper.js
• swiper.json
• swiper.wxml
• swiper.wxss

各文件位置示意图如下：

注：此时编译会报错 错误显示在json那里 先不用管 后面把代码复制粘贴上去再编译就好了

步骤3

分别把下面代码复制进swiper目录中的四个文件

swiper.js

swiper.json

swiper.wxml

swiper.wxss

使用组件

步骤1

在需要使用swiper组件的页面的json文件中引入组件

{
  "usingComponents": {
    "custom-swiper": "../components/swiper/swiper"
  }
}

注意： ../components/swiper/swiper表示组件的位置 这里根据自己实际设置的位置关系进行替换即可

步骤2

在页面的wxml页面中，使用组件代码

<custom-swiper imgUrls="{{carouselImgUrls}}" />

carouselImgUrls

• 类型：数组
• 作用：用于存储轮播图图片的地址（网络地址 or 本地地址）

步骤3

在页面的js文件的data中，添加carouselImgUrls变量

  data: {
    carouselImgUrls: [
    /*
    图片的个数自定义
    图片来源：围脖
	作者：少女兔iiilass ​ ​​​​
 	侵删
 	*/
      "https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixv69f6j20j60j60ui.jpg",
      "https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixvage4j20j60j6tah.jpg",
      "https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixvadfnj20j60j60uk.jpg",
      "https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixvdcswj20j60j6jt6.jpg",
      "https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixv6kmbj20j60j6dhg.jpg"
    ],
  },

最后只需要编译代码 就可以得到效果图了

效果展示

Demo代码

js

wxml

wxss

效果展示

Demo代码

wxml

wxss

效果展示

Demo代码

wxml

wxss

效果展示

Demo代码

WXML

<view class="btn" hover-class="btn_hover" hover-start-time="0">
  <view class="text" hover-class="text_hover">HaihongPro</view>
</view>

WXSS

page{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.btn{
  width: 200px;
  height: 100px;
  color: #fff; 
  background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
  border-radius: 7px;
  position: relative;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  transition: all 0.5s ease;
  line-height: 100px;
  padding: 0;
}
.btn .text{
  display: block;
  width: 100%;
  height: 100%;
  font-size: 24px;
  text-align: center;
}
.btn::before,
.btn::after{
  position:absolute;
  content: '';
  top: 0;
  right: 0;
  background: rgba(2, 126, 251, 1);
  transition: all 0.5s ease;
}
.btn::before{
  width: 0;
  height: 2px;
}
.btn::after{
  height: 0;
  width: 2px;
}

.btn_hover::before{
  width: 100%;
}
.btn_hover::after{
  height: 100%;
}
.btn .text::before,
.btn .text::after{
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  transition: all 0.3s ease;
  background: rgba(2, 126, 251, 1);
}
.btn .text::before{
  width: 0;
  height: 2px;
}
.btn .text::after{
  height: 0;
  width: 2px;
}
.btn_hover{
  background: #fff;
}
.btn .text_hover{
  color:rgba(2, 126, 251, 1)
}
.btn_hover .text_hover::before{
  width:100%;
}
.btn_hover .text_hover::after{
  height:100%;
}

踩坑

在微信小程序中没有hover，取而代之的是：hover-class，也就是说，在原生CSS中，需用使用到hover属性的，在小程序中就需要添加hover-class类，可以看看下面的代码

html

<view class="btn" hover-class="btn_hover" hover-start-time="0">
</view>

css

// 类似 btn:hover
.btn_hover{
  background: #fff;
}

为了达到类似hover的效果，我们还需要设置hover-start-time="0"，也就是当用户点击，立刻（0s）触发hover-class的效果

结语

文章仅作为学习笔记，记录从0到1的一个过程

希望对您有所帮助，如有错误欢迎小伙伴指正～