【自己写了个， 完全没有官方的偏移差 ， 给用的着的用】
<template>
<view class="flex-col">
<view class="flex-col" style="position: relative;">
<scroll-view ref="scroll" class="flex-col" :scroll-y="true" :show-scrollbar="false" @scroll="scroll" :style="{
width: width + 'px',
height: height + 'px'
}"
@touchstart="touchstart" @touchend="touchend" :scroll-top="scrollTop" :scroll-with-animation="true">
<view class="flex-col" ref="scrollContent">
<!-- 居中高度 -->
<view :style="{ height: centerHeight }" v-if="centerHeight != 0"></view>
<!-- 选项 -->
<view class="item flex-center" v-for="(rs, index) in lists" :key="index">
<text class="item-text">{{ rs.name }}</text>
</view>
<!-- 居中高度 -->
<view :style="{ height: centerHeight }" v-if="centerHeight != 0"></view>
</view>
</scroll-view>
<!-- 上下蒙层 -->
<view :style="{
position: 'absolute',
left: 0,
top: 0,
backgroundImage: 'linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0))',
width: width + 'px',
height: centerHeight
}"></view>
<view :style="{
position: 'absolute',
left: 0,
bottom: 0,
backgroundImage: 'linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0))',
width: width + 'px',
height: centerHeight
}"></view>
<!-- 选中项的样式 -->
<view :style="{
position: 'absolute',
left: 0,
top: centerHeight,
borderTopColor: '#f1f1f1',
borderTopStyle: 'solid',
borderTopWidth: '1px',
borderBottomColor: '#f1f1f1',
borderBottomStyle: 'solid',
borderBottomWidth: '1px',
width: width + 'px',
height: '50px'
}"></view>
</view>
</view>
</template>
<script>
const dom = weex.requireModule('dom');
export default {
props: {
width: {
type: [String, Number],
default: 0
},
height: {
type: [String, Number],
default: 0
},
lists: {
type: Array,
default: function() {
return []
}
}
},
data() {
return {
// 自动获取居中高度（用于第一条或最后一条能显示在中间位置）
centerHeight: 0,
// 滚动到的位置
scrollTop: 0,
// 自动获取滚动区域内容的高度
scrollContentHeight: 0,
// 到顶部的距离
scrollTopHeight: 0,
};
},
mounted() {
console.log(this.lists)
this.$nextTick(() => {
this.init();
});
},
methods: {
init() {
this.width = uni.upx2px(this.width);
this.height = uni.upx2px(this.height);
console.log(this.height)
/*
dom.getComponentRect(this.$refs.scroll, option => {
this.centerHeight = option.size.height / 2 - 25 + 'px';
});
*/
this.centerHeight = this.height / 2 - 25 + 'px';
dom.getComponentRect(this.$refs.scrollContent, option => {
this.scrollContentHeight = option.size.height;
});
},
scroll(e) {
this.scrollTopHeight = e.detail.scrollTop;
},
touchend() {
setTimeout(() => {
this.deviation();
}, 100);
},
deviation() {
// 总行数
var itemTotal = parseInt(this.scrollContentHeight / 50);
// 当前行数
var currentItemNumber = parseInt(this.scrollTopHeight / 50);
if ((currentItemNumber == 0 && this.scrollTop == 0 && this.scrollTopHeight == 0)) {
// 再次滚动到顶部不再继续滚动
return;
}
if ((currentItemNumber == itemTotal - 1 && this.scrollTop == Math.round(this.scrollContentHeight - 50) && Math.round(
this.scrollTopHeight) == itemTotal * 50)) {
// 再次滚动到底部不再继续滚动
return;
}
// 执行偏移
if (this.scrollTop == currentItemNumber * 50) {
this.scrollTop = (currentItemNumber + 1) * 50;
} else {
this.scrollTop = currentItemNumber * 50;
}
},
}
}
</script>
<style lang="scss">
.item {
height: 50px;
&-text {
font-size: 32rpx;
}
}
</style>
choin
- 发布：2021-01-04 20:23
- 更新：2022-07-14 17:00
- 阅读：1104
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 3.0.4
手机系统： Android
手机系统版本号： Android 10
手机厂商： 小米
手机机型： note7
页面类型： nvue
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
1
1
预期结果：
1
1
实际结果：
1
1
bug描述：
1、行高不对称（或者理解为坐标不对称，导致遮罩层淡化了顶部的颜色）
2、设置了indicator-style的顶部与底部一直的边框颜色，你会发现底部的比上面的粗
nvue页面子节点未继承 picker-view 的选中框的高度，需要自己设置高度并居中。
-
-
-
-
-
-
-
choin (作者)
回复 DCloud_UNI_Anne: 我上传了官方的代码运行的，一模一样，什么也没改，你看看吧！不知道你那边的nvue是如何不跟我一样的，我还要说一句， "nvue" : {
"flex-direction" : "row"
}
我是这么设置的，你也是吗？2021-01-06 17:24
choin (作者)
不过，虽说报错貌似不影响运行
2021-01-04 20:28