小程序
小游戏
企业微信
微信支付
扫描小程序码分享
swiper 组件. 我添加了组件的 previous-margin next-margin
可以改变前一张图片 跟后一张图片的样式吗? 或者是添加样式进去?
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
老铁 又没有那种监听页面上拉 或者是下拉 的一个方法?
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
根据current和index来判断呗~
搞定
上代码.
xhtml---->>>
<view class="body">
<!--方案2-->
<view class='list'>
<swiper indicator-dots="{{false}}" autoplay="{{false}}" previous-margin="{{'140rpx'}}" next-margin="{{'140rpx'}}" bindchange="swiperChange" >
<block wx:for="{{imgItemNew}}" wx:for-item="info" wx:key="{{index}}">
<swiper-item>
<view class="index-image" >
<image src="{{info.url}}" class="slide-image {{swiperIndex == index ? 'active' : ''}} {{swiperIndex-1 == index ? 'active-previous' : ''}} {{swiperIndex+1 == index ? 'active-next' : ''}}" style='width: {{info.width}}; height: {{info.height}};' />
</view>
</swiper-item>
</block>
</swiper>
------> css
.body {
background-color: rgba(248, 248, 248, 0.137);
height: 100%;
width: 100%;
}
swiper {
width: 750rpx;
height: 952rpx;
margin-top: 75rpx;
swiper-item {
padding-top: 100rpx;
.index-image {
width: 426rpx;
height: 700rpx;
display: flex;
align-items: center;
transform-style: preserve-3d;
perspective: 180rpx;
transition: transform 0.5s, -webkit-transform 0.5s;
.slide-image {
border-width: 4px;
border-style: groove;
border-radius: 10rpx;
padding: 2px;
margin-left: 53rpx;
.active {
transform:scale(1.25) rotateY(0deg);
.active-previous{
transform:rotateY(-10deg);
.active-next{
transform:rotateY(10deg);
完成了记得来分享哦~
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
老铁 又没有那种监听页面上拉 或者是下拉 的一个方法?
根据current和index来判断呗~
搞定
上代码.
xhtml---->>>
<view class="body">
<!--方案2-->
<view class='list'>
<swiper indicator-dots="{{false}}" autoplay="{{false}}" previous-margin="{{'140rpx'}}" next-margin="{{'140rpx'}}" bindchange="swiperChange" >
<block wx:for="{{imgItemNew}}" wx:for-item="info" wx:key="{{index}}">
<swiper-item>
<view class="index-image" >
<image src="{{info.url}}" class="slide-image {{swiperIndex == index ? 'active' : ''}} {{swiperIndex-1 == index ? 'active-previous' : ''}} {{swiperIndex+1 == index ? 'active-next' : ''}}" style='width: {{info.width}}; height: {{info.height}};' />
</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
------> css
.body {
background-color: rgba(248, 248, 248, 0.137);
height: 100%;
width: 100%;
}
swiper {
width: 750rpx;
height: 952rpx;
margin-top: 75rpx;
}
swiper-item {
padding-top: 100rpx;
}
.index-image {
width: 426rpx;
height: 700rpx;
display: flex;
align-items: center;
transform-style: preserve-3d;
perspective: 180rpx;
transition: transform 0.5s, -webkit-transform 0.5s;
}
.slide-image {
border-width: 4px;
border-style: groove;
border-radius: 10rpx;
padding: 2px;
margin-left: 53rpx;
}
.active {
transition: transform 0.5s, -webkit-transform 0.5s;
transform:scale(1.25) rotateY(0deg);
}
.active-previous{
transition: transform 0.5s, -webkit-transform 0.5s;
transform:rotateY(-10deg);
}
.active-next{
transition: transform 0.5s, -webkit-transform 0.5s;
transform:rotateY(10deg);
}
完成了记得来分享哦~