微幕小程序增强版美化之幻灯片简约模式

今天菜鸟库带来微幕小程序增强版美化之幻灯片简约模式,在菜鸟库看来,还是很好看的,不知道其他人觉得咋样,此次美化很简单,只需要修改小程序目录中的html和css就可以了。

预览

微幕小程序增强版美化之幻灯片简约模式

代码修改

以微信小程序为例,此次修改的文件路径为:\pages\index中的index.wxmlindex.wxss

修改html

先将index.wxml中第三十行的以下代码注释或者删除:

<view>立即阅读</view>//如小程序转义失败,请参考下图

微幕小程序增强版美化之幻灯片简约模式

如果使用的是最新的微幕小程序增强版,请将对应代码一并删除,大概在第五十行左右:

微幕小程序增强版美化之幻灯片简约模式

修改css

将图中的CSS代码height: 504rpx;改为height: 400rpx;,也可以不改,菜鸟库只是觉得不改的话美化后的幻灯片有点丑,看个人喜好。

微幕小程序增强版美化之幻灯片简约模式

接着修改css中swiper image中的高度,将其修改为和上面一致即可(必须一致)!

微幕小程序增强版美化之幻灯片简约模式

然后修改css文件中swiper .swiper-desc ,将幻灯片中的描述上移,菜鸟库这里使用的是margin-top属性,只需要在其实添加代码即可:

margin-top: -112rpx;

高度数值自己调,自己满意即可!

微幕小程序增强版美化之幻灯片简约模式

紧接着我们需要修改描述字体颜色和给描述字体添加背景颜色,并且居中显示!修改css文件中的.swiper-des-left>text,将color由#333修改为#fff,添加背景颜色块:

background: rgba(0, 0, 0, 0.69);

这样就快成功了!我们只需要在将css文件中的.swiper-desc > view:nth-of-type(1) 中的样式修改为:

width: 100%;
text-align: center;

微幕小程序增强版美化之幻灯片简约模式

以上就是微幕小程序增强版美化之幻灯片简约模式的全部内容,大家按照步骤操作即可,关于背景颜色等,大家可以按照自己的喜欢来设置!

注意

上方的css代码中background: rgba(0, 0, 0, 0.69);使用的是黑色透明,如果要换成其他颜色透明,颜色代码必须是16进制的,否则在安卓客户端无法看到效果!

PS

昨天分享了《微幕小程序增强版自定义Search页面》,菜鸟库就将自己首页的样式代码也一并发以下,具体可以参考图片:

微幕小程序增强版美化之幻灯片简约模式

修改index.wxml,在图中的注释代码添加以下代码:

微幕小程序增强版美化之幻灯片简约模式

<!-- jszbug新增 -->
<view class="index-container">
<view class="top-Nav-box">
<view class='common-subtitle'>
<view class='common-subtitle-left'>最新文章</view>
<view class='common-subtitle-right'> <navigator url="../search/search" open-type="navigate" hover-class="none">
文章搜索 <icon type="search" color="#959595" size="26rpx"/>
</navigator></view>
</view>
</view></view>
<!-- jszbug新增 -->

代码若被转义,请看下图:

微幕小程序增强版美化之幻灯片简约模式

人已赞赏
技术教程

Windows如何更换应用,文档等数据默认保存位置

2020-7-29 3:34:56

技术教程

宝塔Linux面板定时删除网站监控报表日志

2020-7-29 3:36:45

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索