# 其他的小知识

# 小程序自定义轮播小点的样式

// 页面  <swiper class="square-dot" indicator-dots indicator-active-color="#fff">...</swiper>

swiper.square-dot .wx-swiper-dot {
	background-color: #000;
	opacity: 0.4;
	width: 10rpx;
	height: 10rpx;
	border-radius: 20rpx;
	margin: 0 8rpx !important;
}

swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active {
	opacity: 1;
	width: 30rpx;
}

# 小程序获取当前页面并设置上一个页面内 data 的某些值

// 获取页面栈,数组第一个是首页,最后一个是当前页
var pages = getCurrentPages();
// 当前页面
var currPage = pages[pages.length - 1];
// 当前页面设置值
currPage.setData({
	wait: true,
});
// 前一个页面
var prevPage = pages[pages.length - 2];
// 前一个页面设置值
prevPage.setData({
	wait: true,
});

# 扩展的样式

/* 组件添加向右的箭头的样式 */
.arrow {
	position: relative;
}

.arrow:after {
	position: absolute;
	top: 50%;
	right: 28rpx;
	margin-top: -8rpx;
	display: block;
	content: " ";
	height: 18rpx;
	width: 18rpx;
	border-width: 3rpx 3rpx 0 0;
	border-color: #888888;
	border-style: solid;
	transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
}

/* 扩散元素自身的颜色的阴影写法 */
.shadow-blur {
	position: relative;
}

.shadow-blur::before {
	content: "";
	display: block;
	background: inherit;
	filter: blur(10rpx);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 10rpx;
	left: 10rpx;
	z-index: -1;
	opacity: 0.4;
	transform-origin: 0 0;
	border-radius: inherit;
	transform: scale(1, 1);
}

/* 两端翘起的阴影效果 */
.shadow-warp {
	position: relative;
	background-color: #fff;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
}

.shadow-warp:before,
.shadow-warp:after {
	position: absolute;
	content: "";
	top: 20rpx;
	bottom: 30rpx;
	left: 20rpx;
	width: 50%;
	box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.2);
	transform: rotate(-3deg);
	z-index: -1;
}

.shadow-warp:after {
	right: 20rpx;
	left: auto;
	transform: rotate(3deg);
}

# 去除 button 的默认边框

/* button的边框样式是通过::after方式实现的，如果在button上定义边框就会出现两条边框线，所以我们可以使用::after的方式去覆盖默认值 */

button::after {
	border: none;
}

← 微信的弹窗注意事项 →