微信小程序轮播图后面怎么设置两种不同颜色的背景呀

Question

希望能够给予大概案例源码参考
我希望我的轮播图的背景能够上面一种颜色，下面一种颜色，效果就像我给的图这样就行

Answer 1

效果：

页面：

<view style="width: 100%;height: 450rpx;background: linear-gradient(to right,#e9d293,#f5d57d,#f5d170, #f5c33a);">
    <view style="display: flex;margin-top: 10px;height: 40px;">
      <input class="weui-input" auto-focus placeholder="搜索关键字" 
      class="search-input"/>
      <view class="search-but">搜索</view>
      <view class="search-reset">重置</view>
    </view>
  </view>
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}" wx:key="item">
      <swiper-item>
        <image src="{{item}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>

样式：

swiper {
  height: 400rpx;
  width: 90%;
  margin: -300rpx 30px 10px 30px;
  z-index: 99;
  border-radius: 10px;
}
swiper-item {
  height: 100%;
  width: 100%;
}
.slide-image{
  border-radius: 10px;
  height: 100%;
  width: 100%;
}
.search-input{
  height: 40px;
  background: #FFFFFF;
  margin: 0 0 0 20px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  font-size: 14px;
  padding-left: 5px;
  flex: 1;
}
.search-but{
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  line-height: 40px;
  width: 50px;
  background: rgb(202, 133, 5);
  font-size: 14px;
  color: #fff;
  text-align: center;
}
.search-reset{
  width: 50px;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
}

js：

indicatorDots: true, //是否显示面板指示点

    autoplay: true, //是否自动切换

    interval: 3000, //自动切换时间间隔

    duration: 800, //滑动动画时长

imgUrls: [

      'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0138c65ca421d8a8012141689544ce.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655892810&t=38bf50124d8f6f8a42c45a8edef421b2',

      'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01f9685a2a182ca801216e8d210b4f.png%401280w_1l_2o_100sh.png&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655892849&t=dc1727f655423e8c7b1f91651ecc6495',

      'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01b02f5b840c4da8012190f24d2b2c.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655892870&t=adcf25127dda4e73f0d5d0df0f8f5c33'

    ],