普通模式：(当前块-之前块)x宽度
move=(mySwiperactiveIndex-mySwiperpreviousIndex)mySwiperwidth 。
free模式：现在第一块的相对swiper位置-滑动之前位置
onFirstInit: function(swiper){
location1=mySwiperslides[0]getOffset()left;
}
其他事件{
location2=mySwiperslides[0]getOffset()left;
move=location2-location1-mySwiperpositionsstart;
}
swiper是个功能插件，使用在移动端，相当于jm，jq是javascript的框架库，主用于平台兼容，应用在比如连版广告等需要滑动 *** 作的地方，局限性比较小。
最近写小程序经常用swiper，结果发现，坑好多啊。。。
坑1swiper-item的100%宽高
小程序默认swiper-item的宽高默认继承swiper的宽高，如果不用!important语法根本改不了
如果想要制作不同高度的swiper，则需要事先知道每张的高度然后给swiper赋高度值。
swiper-item的宽度也是一个巨坑，想要设置一次展示多个swiper-item可以设置这个属性：display-multiple-items，值为数字。但是这样每个item都是紧贴着的。
如果想要做出不紧贴的效果，唯一的方法就是swiper-item留部分白，另一部分放置想要展示的内容
掐指一算，我好久没更新了。。。
初始化左右滑块的高度
得到右边每个区间的top和buttom
监听右边商品部分滑动事件，如果在某个区间内，则那个区间的菜单名高亮
主界面indexvye
<view style="display: flex;">
<!-- 菜单 -->
<food-menu :tabBars="tabBars" :tabIndexShow="tabIndexShow" :swiperWidth="menuWidth" :swiperHeight="swiperHeight" @tabtap="tabtap"></food-menu>
<!-- 商品 -->
<scroll-view scroll-y="true" @scroll="scrollGet($event)" scroll-with-animation :scroll-into-view="'tab_'+tabIndex"
:style="{height:swiperHeight+'px',width:foodWidth+'px'}" style="padding-top: 20px;">
<block v-for="(items,index) in foodsList" :key="index">
<view :id="'tab_'+tabBars[index]id">
<view style="font-size: 30upx;height: 40upx;margin-left: 20upx;">
{{tabBars[index]name}}
</view>
<template v-if="itemslistlength>0">
<block v-for="(item,index1) in itemslist" :key="index1">
<food-component @showModal="showModal" :item="item"></food-component>
</block>
</template>
<template v-else>
该菜单尚未添加商品
</template>
</view>
</block>
</scroll-view>
</view>
<script>
import foodComponent from "/food-componentvue"
import foodMenu from "/food-menuvue"
export default {
components: {
foodComponent,
foodMenu
},
data() {
return {
swiperHeight: 0,
menuWidth: 0,
foodWidth: 0,
tabIndexShow: 0,
tabIndex: 0,
scroNum: [], //记录商品的高度
tabBars: [{
name: "粑粑",
id: "0"
},
{
name: "粥粥",
id: "1"
},
{
name: "包包",
id: "2"
},
{
name: "面面",
id: "3"
},
{
name: "粉粉",
id: "4"
},
{
name: "肉肉",
id: "5"
},
],
foodsList: [{
list: [{
food_name: "小米南瓜粥", //名字
food_price: 135, //价格
food_image: "//static/logojpg",
num: 100
}, {
food_name: "小米南瓜粥", //名字
food_price: 135, //价格
food_image: "//static/logojpg",
title: "我是标题",
num: 100
},{
food_name: "小米南瓜粥", //名字
food_price: 135, //价格
food_image: "//static/logojpg",
title: "我是标题",
num: 100
},{
food_name: "小米南瓜粥", //名字
food_price: 135, //价格
food_image: "//static/logojpg",
title: "我是标题",
num: 100
},{
food_name: "小米南瓜粥", //名字
food_price: 135, //价格
food_image: "//static/logojpg",
title: "我是标题",
num: 100
},{
food_name: "小米南瓜粥", //名字
food_price: 135, //价格
food_image: "//static/logojpg",
title: "我是标题",
num: 100
},{
food_name: "小米南瓜粥", //名字
food_price: 135, //价格
food_image: "//static/logojpg",
title: "我是标题",
num: 100
},{
food_name: "小米南瓜粥", //名字
food_price: 135, //价格
food_image: "//static/logojpg",
title: "我是标题",
num: 100
},{
food_name: "小米南瓜粥", //名字
food_price: 135, //价格
food_image: "//static/logojpg",
title: "我是标题",
num: 100
}]
},
{
list: [{
food_name: "黑米粥", //名字
food_price: 199, //价格
food_image: "//static/testjpg",
title: "我是标题",
num: 100
}, {
food_name: "黑米粥", //名字
food_price: 199, //价格
food_image: "//static/testjpg",
title: "我是标题",
num: 100
}, {
food_name: "黑米粥", //名字
food_price: 199, //价格
food_image: "//static/testjpg",
title: "我是标题",
num: 100
}, {
food_name: "黑米粥", //名字
food_price: 199, //价格
food_image: "//static/testjpg",
title: "我是标题",
num: 100
}, {
food_name: "黑米粥", //名字
food_price: 199, //价格
food_image: "//static/testjpg",
title: "我是标题",
num: 100
}, {
food_name: "黑米粥", //名字
food_price: 199, //价格
food_image: "//static/testjpg",
title: "我是标题",
num: 100
}, {
food_name: "黑米粥", //名字
food_price: 199, //价格
food_image: "//static/testjpg",
title: "我是标题",
num: 100
}, {
food_name: "黑米粥", //名字
food_price: 199, //价格
food_image: "//static/testjpg",
title: "我是标题",
num: 100
}, {
food_name: "黑米粥", //名字
food_price: 199, //价格
food_image: "//static/testjpg",
title: "我是标题",
num: 100
}, {
food_name: "黑米粥", //名字
food_price: 199, //价格
food_image: "//static/testjpg",
title: "我是标题",
num: 100
}, {
food_name: "黑米粥", //名字
food_price: 199, //价格
food_image: "//static/testjpg",
title: "我是标题",
num: 100
}, ]
},
{
list: [{
food_name: "白米粥", //名字
food_price: 299, //价格
food_image: "//static/logojpg",
title: "我是标题",
num: 100,
priority: 11, //优先级
display: 1, //是否显示
}, ]
},
{
list: [{
food_name: "包子", //名字
food_price: 5, //价格
food_image: "//static/logojpg",
title: "我是标题",
num: 100
}, ]
},
{
list: [{
food_name: "饺子", //名字
food_price: 100, //价格
food_image: "//static/logojpg",
title: "我是标题",
num: 100
}, ]
},
{
list: [{
food_name: "肉肉", //名字
food_price: 999, //价格
food_image: "//static/logojpg",
title: "我是标题",
num: 100
}, ]
}
]
}
},
onLoad() {
//初始化页面的组件大小
unigetSystemInfo({
success: (res) => {
// - uniupx2px(100) 减去头部的列表
let height = reswindowHeight
let windowWidth = reswindowWidth
thisswiperHeight = height - uniupx2px(153)
thismenuWidth = windowWidth / 5
thisfoodWidth = windowWidth 4 / 5
}
});
},
mounted() {
thisloadScroNum();
},
methods: {
//初始化右边商品的高度、起始高度数组，便于右边滑动，左边跟着动
loadScroNum() {
for (var i = 0; i < thistabBarslength; i++) {
wxcreateSelectorQuery()select('#tab_' + i)boundingClientRect(e => {
thisscroNumpush({
top: etop,
bot: etop + eheight
})
})exec()
}
},
// 监听子组件的tab点击事件
tabtap(index) {
thistabIndexShow = index;
thistabIndex = index;
},
//监听右侧商品栏滑动事件，如果当前滑动的长度达到某个个区间内，则该区间的菜单为高亮
scrollGet(e) {
var now = parseInt(edetailscrollTop) + 40
for (var i = 0; i < thistabBarslength; i++) {
if (now > thisscroNum[i]top && now < thisscroNum[i]bot) {
thistabIndexShow = i
return
}
}
}
}
}
</script>
<style>
swiper-tab-list {
width: 100%;
text-align: center;
color: #808080;
font-size: 36upx;
height: 160upx;
line-height: 160upx;
}
active {
color: #FEDE33;
}
</style>
菜单组件 food-menuvue
<template>
<view style="flex:1;background-color: #f1f2f5;">
<scroll-view scroll-y="true" :style="{height:swiperHeight+'px',width:swiperWidth+'px'}">
<block v-for="(tab,index) in tabBars" :key="tabid">
<view
class="swiper-tab-list"
:class="{'active':(tabIndexShow===index)}"
@tap="tabtap(index)">
{{tabname}} {{tabnumtabnum:''}}
<view class="swiper-tab-line"></view>
</view>
</block>
</scroll-view>
</view>
</template>
<script>
export default{
props:{
tabBars:Array,
tabIndexShow:Number,
swiperHeight:Number,
swiperWidth:Number
},
methods: {
// tab点击事件
tabtap(index) {
this$emit('tabtap',index)
// 子组件相同名称的属性值改变后，父组件的对应监听事件结束后，将修改父组件的该属性和子属性一样
// thistabIndex = index;
},
}
}
</script>
<style scoped>
swiper-tab-list{
width: 100%;text-align: center;
color: #808080;
font-size: 36upx;
height: 160upx;
line-height: 160upx;
}
active {
color: #000000;
font-weight: bold;
background-color: #FFFFFF;
}
</style>
商品组件 food-componentvue
<template>
<view class="box">
<image class="food_image" :src="itemfood_image"></image>
<view class="content">
<view class="title">{{itemfood_name}}</view>
<view class="foodNum">月售{{itemnum}}</view>
<view class="money">￥{{itemfood_price}}</view>
<view class="search">挑选规格</view>
</view>
</view>
</template>
<script>
export default {
props: {
item: Object
},
data() {
return {
}
},
methods: {
}
}
</script>
<style>
box{
min-height: 190rpx;width: 100%;padding: 5rpx;display: flex;
height: auto;
}
box>food_image{
height: 160rpx;width: 160rpx;border-radius: 5%;margin:15rpx
}
box>content{
padding: 5rpx;margin-left: 5rpx;width: calc(100% - 195rpx);position: relative;
}
box>content>title{
font-size: 36rpx;font-weight: 600;
}
box>content>foodNum{
font-size: 25rpx;color: #6D6D72;
}
box>content>money{
font-size: 40rpx;color: #FF0000;font-weight: 600;float: left;
}
box>content>money{
font-size: 40rpx;color: #FF0000;font-weight: 600;float: left;
}
box>content>search{
font-size: 32rpx;font-weight: 600;float: right;background-color: #FFA200;position: absolute;right: 40rpx;bottom: 20rpx;border-radius: 5%;padding: 0 5rpx;
}
</style>
打开CSDN，阅读体验更佳
参与评论 请先 登录 后发表或查
今天写的demo
>
react-native-swiper是一个能用于做轮播效果的三方组件。
设置轮播的方向，默认值为true
设置是否循环播放，默认值为true
初始进入页面标识为0的页面，默认值为0
是否显示控制按钮(即左右两侧的箭头是否可见)
是否自动轮播，默认值为false
当用户拖拽时更新索引调用
宽度，默认flex: 1，全屏
高度，默认flex: 1，全屏
显示分页，在页面下边显示圆点，以表明当前页面位于第几个
允许自定义元素样式（未选中）
允许自定义当前选择点元素样式
设置轮播间隔，默认25
自定义样式将和默认样式合并（分页）
js例：
<script>
var swiper = new Swiper('module01 swiper-container', {
pagination: 'module01 swiper-pagination',
paginationClickable: true,
autoplay : 1000
});
var swiper = new Swiper('module02 swiper-container', {
slidesPerView:5,
paginationClickable: true,
spaceBetween:0,
freeMode: true
});
</script>
获取他们共用的class的时候加上父元素区分开。
写style的时候swiper-container和swiper-paginatio是共用的不要写在里面新建class区分写改变它们不同的样式。
个人用法运用需考虑。
以上就是关于swiper.js中怎么获取滑动前后的位移值全部的内容，包括:swiper.js中怎么获取滑动前后的位移值、swiper 的一堆坑、美团点餐左侧菜单滑动等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）