复习一下小程序轮播

2021-12-14

好久没碰前端了,写个轮播都废了我这么大功夫。

在这里插入图片描述

最近闲着没事写一写小程序,有个要实现的功能是这样的:

请添加图片描述

如图,上面的色块是个轮播,下面的也是轮播。

滑动上面的轮播,下面的也跟着动,滑动下面的,上面也跟着动。

什么,你说哪个傻子会做这种功能?

我啊。

在这里插入图片描述

其实做出来的效果还挺不错的,就看你往轮播里面放什么内容。

我做出来的效果是下面这样的:

请添加图片描述

当然你也可以自己体验一下效果:

还挺不错的吧,快夸夸我。

在这里插入图片描述

但是真的好久没写前端了呀,这点功能都让我写了好久。

还本来就菜。

在这里插入图片描述

话不多说,上点正菜吧。

思路及实现方式

小程序的轮播比较容易实现,毕竟有个swiper嘛。

上面的功能要实现,其实就拆分成下面几点:

  1. 轮播同步移动
  2. 环形轮播
  3. 居中显示

轮播同步移动,这个可以借助swiper的current属性,current是几,轮播就显示第几张图片,从0开始计。

再写个函数,用swiper的bindchange调用,实时改变current的值,就能实现上下两张轮播图同步移动了。

我就直接贴代码了:

// index.js
Page({
  data: {
    block: ["blue", "yellow", "green", "red"],
    // swiper当前是第几张图
    swiperCurrent: 0
  },
  changeSwiper(e) {
  	// 获取当前轮播的角标
    let current = e.detail.current;
    // 赋值
    this.setData({
      swiperCurrent: current
    })
  }
})
<!--index.wxml-->
<view class="container">
  <swiper circular="true" class="starSwiper" current="{{swiperCurrent}}" bindchange="changeSwiper">  
      <swiper-item wx:for="{{block}}" wx:key="i" wx:for-index="index" class="starSwiperItem">  
        <view style="background-color: {{item}};width: 750rpx;height: 600rpx;">
          
        </view>
      </swiper-item>  
    </swiper>  
    <swiper circular="true" class="iconSwiper" current="{{swiperCurrent}}" bindchange="changeSwiper" previous-margin="300rpx"	next-margin="300rpx" style="height: 100rpx;">  
      <swiper-item wx:for="{{block}}" wx:for-index="index" wx:key="i" class="iconSwiperItem">  
        <view style="background-color: {{item}};width: 100rpx;height: 100rpx;">
          
        </view>
      </swiper-item>  
    </swiper>
  </view>

下图画红线的,就是轮播同步的关键。

其实就是定义一个变量,让轮播实时显示这个变量所在的轮播图,每次滑动的时候,保持这个变量一致就行。

环形轮播就更容易实现了,不过这真的是个很冷门的知识点,百度了下才知道,就是下面这个标签:

设置一下swiper的circular属性为true就行。

<swiper circular="true"></swiper>

然后你就会发现这个轮播怎么划也划不完啦。

在这里插入图片描述

最后是整个轮播图的居中显示。

这个其实前端稍微熟悉点的人都知道,就是用了很简单的flex。

flex布局是个很经典的css样式,说到flex,我总会想起阮一峰老师的flex教程。

这个人,每次搜flex都能搜到他的教程。

技术博主很叼的一点是,当你不管怎么搜都能搜到他的时候,你就会关注他了。

我记得我刚开始学flex的时候就是看他的文章,那还是大二的时候,没想到这么久还要看他的文章,真是永远的经典。

我当然不会承认是我一点进步都没有。

在这里插入图片描述

这里贴一贴阮一峰老师的教程,有兴趣的朋友可以去看一看:《Flex 布局教程:语法篇》

再贴一贴这里实现flex的css代码:

/**index.wsxx**/
page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: space-between;
}
swiper {
  width: 100%;
  height: 500rpx;
}

最后

最后说一点废话,工作之后因为主业是java,平时所做、所学的都几乎都是后端和运维了。

很久没有这样,一个产品的全部过程都由自己来做,这是个很不错、也很难受的过程。

从制图、前端、后端再到部署,人是不可能什么都精通的,所以这个过程中,疑问和百度比较多。

读书的时候因为经常这样,导致个人发展有点,什么都会,但又什么都不精。

为此我吃了很多亏,出来找工作还差点找不到。

后来看到网上很多言论,说程序员应该发展深度,再发展广度。

意思就是说,假如你现在是个前端,那么你应该把前端学精,再去考虑学学后端,兴趣也好,增加个人竞争力也罢。

我也不知道这个看法是不是对的,但毕竟年轻人嘛,听话照做就不是年轻人了。

我乐意这样做,这个过程我还乐在其中,这就够了。

在做这个产品的过程我也学到了许多东西,比如为了有一个合适的背景图,我拿起了很久没用的ps,比如如何用java的Graphic2D去画分享海报。

下面也打算写写这个,分享一下。

毕竟是做了努力的作品,还是希望有人看它、用它。

如果你觉得这个东西还挺有趣,愿意把它分享给你的朋友,那就更好了。

所以最后就再分享一下这个作品吧。

enjoy。