公众号绑定的小程序，头部banner轮播图实现

首先祝小伙伴们元宵节(中国情人节)快乐。

(配图为原创，百度科技园的大灯笼) 

(配图来源公司公众号，百度大厦的灯笼)  

这次的开发目的就是一个：实现头部banner图轮播，点击跳转。

老话说的好，隔行如隔山，每当遇到css排版，绝对头大，磕磕绊绊在小程序里实现了头部的banner+点击跳转到公众号的文章详情页，折腾了三天，功能实现了，但是还存在一个问题，banner图如果高度比较大的话，就会显示不全，现在也不知道咋回事，今天去请教下前端的大牛，让人家给诊断诊断。

1、准备图片素材

图片我随便找了两张，裁剪了一下，尤其是高度，最开始选择的是16：9，在小程序里展示不全，调试半天也没调好，没办法就把高度裁的更小一些，这样才能全部展示，今天去请教一下做小程序的同事，看看到底咋回事，具体原因我在后面的文章中再分享。

2、调研头部图片轮播组件

说到这，如果是前端开发的同学，肯定是手到擒来，调研啥，直接上手干了，咱不行，还得先调研一番，学习学习，不过现在学习的工具很多，直接一问也就成了：

这一问，代码都有了，大模型时代，方便了你我他。

swiper组件官方说明文档：swiper组件使用说明

 在这页面当中，有示例代码，可以直接在微信开发者工具中进行预览和调试，非常方便，代码也可以直接参考。

3、技术实现细节

首先是图片的放置路径，目前是放在了本地，当前小程序需要的静态资源还不多，放在本地还没有问题。

在index.js中，设置banner轮播需要的图片、跳转链接、展示文字：

在index.wxml实现banner的轮播： 

<view>
  <swiper indicator-dots="true" circular="true"
    autoplay="true" interval="2000" duration="500">
    <block wx:for="{{background}}">
      <swiper-item>
        <view class="banner-item" bindtap="onArticleTap" data-url="{{item.url}}">
          <image class="banner-img" src="{{item.img}}" mode="widthFix"/>
          <view class="banner-text">{{item.text}}</view>
        </view>
      </swiper-item>
    </block>
  </swiper>
</view>

这段代码相对容易理解，swiper组件必须配合swiper-item组件使用，看一下官方文档都能明白。swiper几个参数的含义如下：

indicator-dots：是否显示面板指示点，就是轮播图上那个翻页的小黑点点。

circular：是否采用衔接滑动，控制轮播到最后一个banner时的切换效果，设置为true，切换更平滑，建议设置为true。

autoplay：自动轮播

interval：自动切换间隔，就是隔多久换下一个轮播图

duration：轮播滑动时长

最难的来了，css样式，盖房子容易，装修那就费劲了，花钱还流水似的没上限：

.banner-item {
  position: relative;
  width: 100%;
  height: 100%;
}
.banner-image {
  width: 100%;
  height: 100%;
}
.banner-text {
  position: absolute;
  top: 86%; /* 垂直居中 */
  left: 4rpx; /* 距离右侧 20rpx */
  transform: translateY(-50%); /* 垂直居中 */
  color: white;
  font-size: 27rpx;
  font-weight: bold;
  text-align: right; /* 文字右对齐 */
  background-color: rgba(0, 0, 0, 0.4); /* 半透明背景 */
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
}

这个装修(css)我还是搞不定，文心一言、deepseek搜来的，我只是简单改了改，改到差不多是我想要的了就完事，还没能更透彻的理解，期待前端同学也给我讲讲。

到这banner轮播算是实现七七八八，只能说能用，今天把代码提交上去，更新一版小程序，想一览"豪宅"装修的，可以从公众号跳转，或者直接搜索【码农夜读】应该也能搜到。

今天是中国人的情人节，在这里祝码农夜读的小伙伴们元宵节(情人节)快乐，事事顺意。

小伙伴们，大过节的，点个关注再走呗~~~。公众号、csdn都关注关注呗~~~~~~~~。

(配图为原创，百度科技园的大灯笼)