uniapp 小程序轮播图露出前、后项的一部分及动态设置背景图

1.露出前一项、后一项的一部分，需要给swiper设置 previous-margin，next-margin，可接受rpx、px的值,注意支付宝跟微信设置的不一样，需要分情况处理

html

2.动态设置背景图

:style="{backgroundImage: 'url('+item.memberVipBg+')'}"

由于后台不想下发背景图片，所以需要前端自己改造数据，新增字段，由于每个swiper-item 背景图都不一样，所以需要动态设置。但是如果对每一个swiper-item逐一判断,再添加背景图相对来说比较繁琐。所以此处转换一下思路，在data里面先定义几个背景图，然后根据后台下发的一个字段标志，动态的去设置背景图,让它指向data里面定义的那几个背景图

js

                // 白银会员背景
                memberVipBg1: `${environment.BIG_IMG_ORIGIN}/renrenquminiprogram/commonimg/silver-bg.png`,
                // 黄金会员背景
                memberVipBg2: `${environment.BIG_IMG_ORIGIN}/renrenquminiprogram/commonimg/gold-bg.png`,
                // 铂金会员背景
                memberVipBg3: `${environment.BIG_IMG_ORIGIN}/renrenquminiprogram/commonimg/platinum-bg.png`,
                // 钻石会员背景
                memberVipBg4: `${environment.BIG_IMG_ORIGIN}/renrenquminiprogram/commonimg/diamonds-bg.png`,

其中用到了es6的解构赋值，并设置别名，觉得以后应该用的着，记录一下

const {growthValue, currMemberLevelId, memberLevelRightList:memberCardList} = res.body;
this.growthValue = growthValue;
this.currMemberLevelId = currMemberLevelId;

this['memberVipBg'+v.colourLevel] 觉得这个地方比循环逐个设置背景图简单的多，而且想法比较巧妙

memberCardList.map((v,index) => {
    v.memberVipBg = this['memberVipBg'+v.colourLevel];
        return v;
    })
this.memberCardList = memberCardList;

3.css需要注意的地方

css

.swiper-item {
  width: 100%;
  padding: 0 45rpx;
  height: 260rpx;
  box-sizing: border-box;
  background-repeat:no-repeat;
  background-size: 100% 100%; /*解决背景图展示不全的问题*/
}

看了这么久，累了吧，关注一下吧

image.png

具体细节可参考文档：
https://developers.weixin.qq.com/miniprogram/dev/component/official-account.html