微信小程序利用scroll-view和swiper实现图片滚动切换

微信小程序利用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, //自动切换时间间隔,3s
    interval1: 2000,
    duration: 1000, //	滑动动画时长1s
    clickNumber: 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;
}