微信小程序利用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;
}

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

微信小程序利用swiper+scroll-view实现Tab切换
微信小程序利用swiper+scroll-view实现Tab切换先放一张效果图需要实现的功能逻辑: 1.当用户点击tab的时候,tab样式发生改变,并且下方对应的展示内容也发生改变. 2.当用户滑 ...
微信小程序利用腾讯云IM发送语音 + 图片
微信小程序利用腾讯云IM发送语音 + 图片能做到这里说明你已经可以发送普通文本了如果没有的话可以看一下我的上一篇文章有完整的讲解效果图语音聊天发送图片传送 → 发送图片发送语音 ** ...
微信小程序利用echarts实现中国任意行政区域地图
微信小程序利用echarts实现中国任意行政区域地图前言实现克隆代码集成点击事件点击跳转代码改造尾巴前言最近微信小程序中需要绘制地图,然后点击地图可以跳转到下一层级.研究了一番,选 ...
微信小程序利用云开发实现评论功能
微信小程序利用云开发实现评论功能如果喜欢可以给我一个关注. 一.微信小程序,评论功能的实现. 首先我们先布局,一个文章或者是商品,底下是评论,  <vie ...
html5绘制图形幸运大转盘,微信小程序利用canvas 绘制幸运大转盘功能
小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, resta ...
微信小程序动态添加view
微信小程序动态添加view //index.html<button bindtap='clickMe'> 添加</button> <input type='input' ...
微信小程序利用canvas实现六边形蜘蛛图
微信小程序利用canvas实现六边形蜘蛛图发布时间:2018-01-24 14:30:29 1..wxml <canvas style="width: 200px; height: ...
微信小程序壁纸源码+自动采集小米图片
简介: 小程序内核里面对接的是小米壁纸,自动采集无需自己手动上传,而且可以搜索的内容很多,各种类型的壁纸图片都是有的. 搭建方法: 1,注册微信小程序,类目选工具_图片. 2,将源码导入开发者工 ...
uniapp微信小程序服务器与行内img src图片路径拼接
uniapp微信小程序服务器与行内img src图片路径拼接 1.在main.js 在行内直接引入运行就可以连接到服务器的图片了

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

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

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

最新文章

热门文章