0
点赞
收藏
分享

微信扫一扫

微信小程序 | 开发常用事例(二)

拥抱变化,掌握要点~

微信小程序 | 开发常用事例(二)_css

前言

许久之前,搞了一段时间小程序,闲置了一段时间,现在突然搞起来,还真的是有点发蒙。

俗话说,好记性不如烂笔头。正好借此机会,整理一波开发过程中遇到的觉得不错的小事例,我尽可能保证每个小事例提供一个小演示图,方便你我大,感谢鸡老大~

接上一篇微信小程序常用事例总结:

  • About AnyThings 之 小程序开发常用事例 Notes(一)

小事例汇总

对于不熟悉的人而言,前端是真的烦。

点滴记录,拥抱变化吧~

1. 点击 van-cell 进入客服

官方明确说明组件不适合提供此微信开放能力:

  • van-cell 可否添加button.open-type微信开放能力 #730

统一的 item 效果,单独定义多多少少显得这个页面都会狠突兀,如何在使用 van-cell 的前提下,点击进入客服呢?

狠 easy~调整 button 一个属性即可。

Step 1:定义 wxss 样式

.contact_btn::after{
border: none;
}

.contact_btn {
position: static !important;
border: 0;
background-color: transparent;
outline: none;
}

Step 2:应用 wxss 样式

<van-cell title="联系客服" is-link>
<button class="contact_btn" open-type="contact" />
</van-cell>

效果如下:

微信小程序 | 开发常用事例(二)_ide_02

录制的效果图不是很明显,可能我是个小色盲,对录制中按压颜色不是很明显,尴尬~

2. 去除 vant-button 默认样式(2020-03-12 更新)

先来看下最初的效果:

微信小程序 | 开发常用事例(二)_微信小程序_03

再放下实际的 xml 以及 css 代码:

<van-button custom-class="withdraw" type="info">提现</van-button>

.header .withdraw {
color: #ff632d;
background-color: #fff;
width: 200rpx;
height: 58rpx;
border-radius: 8rpx;
}

周围蓝蓝的那一圈是什么鬼?

经过排查,发现 van-button 有这么一个样式,如下:

.van-button--info {
./miniprogram_npm/@vant/weapp/button/index.wxss: 1color: #fff;
color: var(--button-info-color,#fff);
background: #1989fa;
background: var(--button-info-background-color,#1989fa);
border: 1px solid #1989fa;
/* 注意看下面这一行 */
border: var(--button-border-width,1px) solid var(--button-info-border-color,#1989fa);
}

随后放出解决之道,悄悄更新下 css:

.header .withdraw::after {
border: none !important;
}

.header .withdraw {
color: #ff632d;
border: none !important;
background-color: #fff;
width: 200rpx;
height: 58rpx;
border-radius: 8rpx;
}

观察下修改后的效果:

微信小程序 | 开发常用事例(二)_ide_04

是不是很好看~ 鸡老大万岁~

爬上来更新一波,突然发现去除蓝色可以同感设置边框颜色糊弄过去,😂

3. 文字显示图片上面 (2020-03-19 更新)

先来个效果图:

微信小程序 | 开发常用事例(二)_小程序_05

图片自己想办法切的,直接设置背景,效果不如直接一个 image 好看,随使用了如下的方案。

附上小程序页面代码:

<view class="header">
<image src="/pages/images/bg_rank_header.png" />
<view class="header_info">
<text class="title">收益排行榜</text>
<text class="desc">邀请徒弟越多,收益越大哦</text>
</view>
</view>

以及对应的 Css:

.header {
display: flex;
display: -webkit-flex;
}

.header image {
width: 100%;
height: 260rpx;
position: relative;
}

.header .header_info {
position: absolute;
top: 60rpx;
left: 40rpx;
display: flex;
display: -webkit-flex;
flex-direction: column;
color: #fff;
}

.header .header_info .title {
font-size: 55rpx;
}

.header .header_info .desc {
font-size: 30rpx;
margin-top: 15rpx;
}

4. 去除 van-divider 默认边距 (2020-03-19 更新)

先看下不去除默认效果:

微信小程序 | 开发常用事例(二)_小程序_06

蛮恶心的。因为不熟悉,搞了好半天,才发现内置 css 设置了一个 margin:

微信小程序 | 开发常用事例(二)_css_07

说一下目前的解决方案,直接覆盖此样式,为了避免出现其他问题,直接设置强制,如下:

.van-divider {
margin: 0rpx !important;
}

效果如下:

微信小程序 | 开发常用事例(二)_微信小程序_08

5. 改造 vant-tab (2020-03-19 更新)

老规矩放图:

微信小程序 | 开发常用事例(二)_css_09

左侧是默认提供效果,右侧则是项目期望实现的效果,下面附上源码。

<view class="content">
<van-tabs animated="true" active="all" nav-class="bar" swipeable="true">
<van-tab name="all" title="月排行">

</van-tab>
<van-tab name="income" title="周排行">

</van-tab>
<van-tab name="expenditure" title="日排行">

</van-tab>
</van-tabs>
</view>

wxss:

/* 设置 bar 背景色  */
.content .bar {
background-image: linear-gradient(to right, #f66 10%, #c33) !important;
}

/* 去除默认边框宽度 */
.van-hairline--top-bottom::after {
border-width: 0rpx !important;
}

/* 设置默认字体 */
.van-tab {
color: #ffc !important;
font-weight: 300 !important;
}

/* 设置选中字体 */
.van-tab--active {
color: #fff !important;
font-weight: 800 !important;
}

/* 画个选中的三角形 */
.van-tabs__line {
width: 0 !important;
height: 0;
border-left: 8px solid transparent !important;
border-right: 8px solid transparent !important;
border-bottom: 10px solid #ffc !important;
background-color: transparent !important;
font-size: 0;
line-height: 0;
left: 7% !important;
bottom: -1.2px !important;
}

最终效果如下:

微信小程序 | 开发常用事例(二)_css_10

参考资料

  • MDN web docs
  • Youzan GitHub
举报

相关推荐

0 条评论