微信小程序利用scroll-view和swiper实现图片滚动切换
<view class="starbox"><view class="stararea"><view class="sz"><view class="star">星币专区</view><view class="zhi">超值推荐</view> </view><view class="more"><view class="mz">更多实惠</view><view class="triangle"></view></view></view><swiper style="height:320rpx;" current='{{clickNumber}}' bindchange='changeSwipe'><block wx:for="{{stardata}}" wx:key="index" data-id="{{item.id}}"><swiper-item data-id="{{item.id}}"><view class="pictext" ><view class="left" ><image src="{{item.image}}"></image></view><view class="right"><view class="name">{{item.name}}</view><view class="all"><view class="weight">{{item.weight}}</view><view class="back">返{{item.send_point}}星币</view></view><view class="dis">{{item.content}}</view></view></view></swiper-item></block></swiper><view class="scv"><scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%;overflow:hidden"><view class="scroll-view-item_H demo" wx:for="{{stardata}}" wx:key="index" data-id="{{item.id}}" bindtap='centerTap'><view class="{{cateid == item.id ? '' : 'mb'}}"></view><image src="{{item.image}}"></image></view></scroll-view></view></view>
js文件中在data中定义数组变量
data: {indicatorDots: true, //是否显示面板指示点autoplay: true, //是否自动切换interval: 5000, //自动切换时间间隔,3sinterval1: 2000,duration: 1000, //滑动动画时长1sclickNumber: 0,classify: []，index:0,hotgoods:[],newhotgoods:[],switchgoods:[],stardata:[],cateid:'',},
changeSwipe(event){console.log(event)var type =event.detail.current;this.setData({clickNumber: type});},
//点击滚动切换centerTap(event){console.log();var id = event.currentTarget.dataset.id;var cur = event.detail.x;console.log(cur);//每个tab选项宽度占15%var singleNavWidth = wx.getSystemInfoSync().windowWidth * 12 / 100;console.log(singleNavWidth);this.setData({clickNumber: parseInt(cur / singleNavWidth),cateid:id})},
.stararea{display: flex;justify-content: space-between;align-content: center;align-items: center;padding:10rpx;}.sz{display: flex;align-items: center;align-content: center;align-self: center;}.star{font-size: 32rpx;font-weight:bold;background: linear-gradient(to bottom, #C7EDF8, #53B3F6);-webkit-background-clip: text;background-clip: text;color: transparent;margin-right: 10rpx;}.zhi{color:#9A9A9A;font-size:28rpx;}.more{font-size:22rpx;color:#FF8640;display: flex;align-items: center;align-content: center;}.mz{margin-right:8rpx;}.triangle{width: 0;height: 0;border-top:5px solid transparent;border-bottom: 5px solid transparent;border-left: 5px solid #FF8640;margin-right:8rpx;}/**星币专区***/.starbox{background:#fff;height: 500rpx;}.pictext{background:#fff;border-radius: 8rpx;margin:70rpx;margin-top:20rpx;margin-bottom:20rpx;height: 280rpx;box-shadow:0px 2px 6px rgba(203,211,231,1);display: flex;align-items: center;justify-content: space-around}.left{/* border:1px solid #8EC022; */width: 342rpx;height: 264rpx;}.right{width: 248rpx;}.name{width: 248rpx;font-size:24rpx;font-weight:bold;margin-bottom: 14rpx;-webkit-line-clamp:1;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;word-break:break-all;}.all{display: flex;margin-bottom: 14rpx;}.weight{font-size:22rpx;color: #707070;margin-right: 8rpx;}.back{font-size:22rpx;background: #FF8640;border-radius:2px;width: 124rpx;height: 36rpx;text-align: center;color:#fff;margin-right:8rpx;}.dis{font-size: 22rpx;color: #9A9A9A;width:242rpx;height: 120rpx;-webkit-line-clamp:1;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;word-break:break-all;}.scroll-view_H{white-space: nowrap;width: 100%;overflow:hidden;}.demo{width:76rpx;height:76rpx;/* border:1rpx solid #00A2F3; */display:inline-block;margin-left:8rpx;position: relative;top: 0px;left: 0px;}.mb{width:76rpx;height:76rpx;background: #000;opacity: 0.3;position: absolute;top: 0px;left: 0px;}.mw{width:76rpx;height:76rpx;background: #000;opacity: 0;position: absolute;top: 0px;left: 0px;}
