微信小程序swiper实现滚动渐变效果案例1

一、简单滚动渐变案例

opcity 渐变

background linear-gradient 渐变合并

展示效果：

wxml

<view class="case case2">
  <swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="3000" duration="500" style="height:180px;" bind:change="swiperChange">
    <swiper-item wx:for="{{banners}}" wx:key="id">
      <view class="block block{{index}}  {{index==current?'blactive':''}}">
        第{{index + 1}}张图片
      </view>
    </swiper-item>
  </swiper>
</view>

css

/* 2 */
.block {
  height: 180px;
  z-index: 10;
  text-align: center;
}

.block.active {
  opacity: 1;
}

.back {
  display: none;
}

.block {
  opacity: 0;
  transition: all 0.8s ease-in-out;
}

.block image {
  width: 100%;
  display: block;
  opacity: 0;
}

.block.block0 {
  background: linear-gradient(to top, rgb(255, 249, 165), rgba(255, 255, 255, 0)), url('http://www.jnqianle.cn/upload/logo/content/202608/13/6f68775b-5152-4734-a2cd-fcae8f5c1f9c.jpg') no-repeat;
  background-size: 100% 100%;
}

.block.block1 {
  background: linear-gradient(to top, rgb(255, 195, 219), rgba(255, 255, 255, 0)), url('http://www.jnqianle.cn/upload/logo/content/202410/18/a501268f-6dbf-4386-87bf-7c9824652476.jpg') no-repeat;
  background-size: 100% 100%;
}

.block.blactive {
  opacity: 1;
  transition: all 0.8s ease-in-out;
}

js

Page({
  data: {
    banners: [{
        id: 0,
        url: '',
        animation: {}
      },
      {
        id: 1,
        url: '',
        animation: {}
      },

    ],
    current: 0,
  },
  //滚动时候触发
  swiperChange(e) {
    var num = e.detail.current;
    var item = this.data.banners[num];
    this.setData({
      current: num,
      backurl: item.url,
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    var num = 0
    var item = this.data.banners[num];
    this.setData({
      current: num,
      backurl: item.url,
    });
  },
})

更多：

微信小程序请求处理,ajax请求

微信小程序生命周期_页面生命周期微信小程序坐标位置使用整理(四)map组件