<template>
<view class="authen">
<scroll-view scroll-y="true" class="scroll-Y" @scroll="scroll" :scroll-into-view="intoindex">
<view class="auth-top mt20">
<image class="auth-logo" src="../../static/authen/ico-logo.png" mode="aspectFit"></image>
<text class="auth-t">放心预约名医看诊</text>
<image class="auth-zh" src="../../static/authen/auth-zh.png" mode="widthFix"></image>
</view>
<view class="auth-lab-h" id="jump0">
<view class="auth-lab-s" :class="{'is-fixed': isFixed}">
<view class="auth-lab">
<text :class="current == 0 ? 'active' : ''" @click="labjump(0)">医生团队</text>
<text :class="current == 1 ? 'active' : ''" @click="labjump(1)">行业资质</text>
<text :class="current == 2 ? 'active' : ''" @click="labjump(2)">放心服务</text>
</view>
</view>
</view>
<view class="auth-box">
<view class="ab-tit">医生团队</view>
<text class="ab-sub">严格审核医生入驻资质</text>
<text class="ab-text">为保证入驻的医生真实可靠、专业能力强,我们对医生的资质进行了严格的审核。</text>
<view class="ab-list">
<view>
<image src="../../static/authen/ico-card.png" mode="aspectFit"></image>
<view class="ab-info">
<text class="info-h4">四证齐全</text>
<text>入驻医生必须拥有医生资格证、医师技术资格证、医师执业证、身份证4项证件。</text>
</view>
</view>
<view id="jump1">
<image src="../../static/authen/ico-cardsh.png" mode="aspectFit"></image>
<view class="ab-info">
<text class="info-h4">证件查询</text>
<text>平台将机构证件与国家卫生健康委员会网站上的信息进行严格人工比对,确保证件真实有效。</text>
</view>
</view>
</view>
</view>
<view class="auth-box">
<view class="ab-tit">行业资质</view>
<text class="ab-sub">严格审核合作机构资质</text>
<text class="ab-text">为保证合作机构真实可靠、服务正规,我们对合作机构的资质进行了严格的审核。确保可以提供安全可靠的预约挂号、互联网诊疗服务。</text>
<view class="ab-list">
<view>
<image src="../../static/authen/ico-card.png" mode="aspectFit"></image>
<view class="ab-info">
<text class="info-h4">证件齐全</text>
<text>合作机构必须拥有医疗机构执业许可证。</text>
</view>
</view>
<view id="jump2">
<image src="../../static/authen/ico-cardsh.png" mode="aspectFit"></image>
<view class="ab-info">
<text class="info-h4">证件查询</text>
<text>平台将机构证件与国家卫生健康委员会网站上的信息进行严格人工比对,确保证件真实有效。</text>
</view>
</view>
</view>
</view>
<view class="auth-box mb20">
<view class="ab-tit">放心服务</view>
<text class="ab-sub">严格审核 双重质控</text>
<text class="ab-text">注重用户隐私保护,确保系统用户信息安全。同时医学团队严格质控,监督医生专业性及服务态度,提升用户体验。</text>
<view class="ab-other">
<view>
<image src="../../static/authen/ico-server.png" mode="aspectFit"></image>
<text>严审服务质量</text>
</view>
<view>
<image src="../../static/authen/ico-privacy.png" mode="aspectFit"></image>
<text>隐私信息保护</text>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
const app = getApp();
export default {
components: {
},
data() {
return {
scltop: 0,
isFixed: false,
current: 0,
intoindex: ''
}
},
mounted() {
const query = uni.createSelectorQuery().in(this);
query.select('#jump0').boundingClientRect(data => {
this.scltop = data.top
}).exec();
},
onLoad() {
},
methods: {
scroll(e){
if(e.detail.scrollTop > this.scltop){
this.isFixed = true
}else{
this.isFixed = false
}
},
labjump(index){
this.current = index
this.intoindex = 'jump' + index
}
}
};
</script>
<style scoped>
page{ height: 100%;}
.authen{ flex:1;}
.authen scroll-view{height:100vh;}
.auth-top{ box-shadow: 0 0 10px rgba(0,0,0,.08); border-radius: 30rpx;padding: 40rpx 30rpx 30rpx 30rpx; margin: 0 20rpx;position: relative;z-index: 21;}
.auth-logo{display: block; width: 90rpx;height: 90rpx;margin: 0 auto;}
.auth-t{text-align: center;display: block;font-size: 40rpx;color: #1b68eb;font-weight: bold;margin-top: 25rpx;}
.auth-zh{ width: 100%;height: auto;margin-top: 40rpx;}
.auth-lab-h{ height: 120rpx;}
.auth-lab-s{width: 100%;height: 120rpx;background-color: #fff; padding-top: 20rpx;box-sizing: border-box;}
.is-fixed{position: fixed;left: 0;top: 0;z-index: 20;}
.auth-lab{ box-shadow: 0 0 10px rgba(0,0,0,.08); border-radius: 30rpx; display: flex;margin: 0 20rpx;}
.auth-lab > text{ flex:1;display: block;height: 100rpx;line-height: 100rpx;text-align: center;}
.auth-lab > .active{ color: #1b68eb;position: relative;}
.auth-lab > .active::before{content: '';display: block;width: 68rpx;height: 8rpx;background-color: #1b68eb;position: absolute;left: 50%;margin-left: -34rpx;bottom: 0;border-radius: 5rpx;}
.auth-box{ box-shadow: 0 0 10px rgba(0,0,0,.08); border-radius: 30rpx; display: flex; margin: 20rpx 20rpx 0 20rpx;flex-direction: column;padding: 35rpx 30rpx 30rpx 30rpx; line-height: 1.4;}
.mt20{ margin-top: 20rpx;}
.mb20{ margin-bottom: 20rpx;}
.ab-tit{ font-size: 40rpx;text-align: center;font-weight: bold;color: #000;}
.ab-sub{ text-align: center;font-size: 34rpx;color: #666;margin-top: 10rpx;}
.ab-text{font-size: 32rpx;color: #999;margin-top: 15rpx;}
.ab-list{}
.ab-list > view{ display: flex; margin-top: 24rpx ; }
.ab-list > view image{ width: 66rpx;height: 66rpx; margin: 0 20rpx 0 0;}
.ab-info{flex:1;display: flex;flex-direction: column;font-size: 28rpx;color: #999;}
.info-h4{font-size: 32rpx;color: #333;font-weight: bold;margin-bottom: 10rpx;}
.ab-other{ display: flex; margin-top: 30rpx;}
.ab-other > view{ flex:1;display: flex;flex-direction: column;align-items: center;}
.ab-other > view image{ width: 66rpx;height: 66rpx;margin-bottom: 20rpx;}
</style>
![1***@139.com](https://img-cdn-tc.dcloud.net.cn/account/identicon/b347003d14d2b7673d11069fc6a9c65d.png)
- 发布:2021-10-11 15:05
- 更新:2021-10-11 17:51
- 阅读:391
产品分类: HbuilderX
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 18363
HBuilderX版本号: 3.2.9
示例代码:
操作步骤:
如上代码
如上代码
预期结果:
滚动吸顶
滚动吸顶
实际结果:
吸顶无效
吸顶无效
bug描述:
HBuliderX升级至最新版本(3.2.9)时,页面的滚动吸顶效果不生效
1 个回复
DCloud_UNI_Anne
问题已确认,下个版本会修复,已加分,感谢您的反馈!