微信小程序复杂代码简单重构方法

最新推荐文章于 2023-03-14 15:12:42 发布

Simorel

最新推荐文章于 2023-03-14 15:12:42 发布

阅读量597

点赞数

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.youkuaiyun.com/Simoral/article/details/105385356

版权

微信小程序专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何调整轮播图（swiper）的高度及指示点样式，以及优化首页商品分类展示，通过修改WXML和WXSS实现更好的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

banner (swiper)

轮播图，首页展示。

修改banner高度
注意：
- data 内一定要有空格，不然就会渲染失败。添加 height 配置banner高度。
```
<template is="banner" data="{{ param:{height: 905, ...origin-param} }}" />
```

修改banner指示点样式

注意：

.banner 是组件顶级根class属性
.wx-swiper-dot.wx-swiper-dot-active 必须紧挨着，不能拆开写

/* 默认指示点的样式 */
.banner .wx-swiper-dot {
  width: 20rpx;
  height: 15rpx;
  background: #bbb;
  border-radius: 20rpx;
}

/* 选中指示点的样式 */
.banner .wx-swiper-dot.wx-swiper-dot-active {
    width: 40rpx;
    background: #ffcccc;
}

cat - title

商品分类，首页展示

wxml

使用 cat.big_pic_url 大图，以达成横向最大的需求。

components\common\index.wxml

<!-- 新版标题
<view class="title-bar flex-y-center flex-x-center">
    ......
</view> -->
<navigator
    class="title-bar flex-y-center flex-x-center"
    url="..."
>
    <image
        wx:if="{{cat.big_pic_url}}"
        mode="aspectFit"
        src="{{cat.big_pic_url}}"
    />
</navigator>

wxss
pages\index

/* #region cat */
.title-bar {
  position: relative;
  border: 0;
  height: 232rpx;
}

.title-bar image {
  width: 100%;
  height: 100%;
}
/* #endregion */