Skip to content

H
hello uni-app x

Accustomed_ / hello uni-app x
与 Fork 源项目一致

Fork自 DCloud / hello uni-app x

通知 1
Star 0
Fork 0
H
hello uni-app x
提交 06538f77 编写于 作者: M mehaotian
浏览文件
操作

pref: 优化吸顶示例样式

上级 e9e193a7
隐藏空白更改
内联 并排
Showing with 115 addition and 101 deletion
pages/template/scroll-sticky/scroll-sticky.uvue
浏览文件 @ 06538f77
<template> <template>
<scroll-view :scroll-y="true" @scroll="onScroll" class="page"> <scroll-view :scroll-y="true" @scroll="onScroll" class="page">
<view class="content-item">
<view v-for="(item,index) in list" :key="index" class="item"> <text class="text">向上滑动页面，体验元素吸顶效果。</text>
first content-{{item}} </view>
</view> <view v-for="(item,index) in list" :key="index" class="content-item">
<text class="text">first content-{{item}}</text>
</view>
<!-- <view ref="sticky" class="search" @click="" :style="{ <!-- <view ref="sticky" class="search" @click="" :style="{
'transform': 'translateY('+stickyTran+'px)' 'transform': 'translateY('+stickyTran+'px)'
}"> --> }"> -->
<view ref="sticky" class="search" @click=""> <view ref="sticky" class="search" @click="">
<view style="flex-direction: row;"> <view style="flex-direction: row;">
<image src="/static/template/scroll-fold-nav/search.png" style="width: 15px;" mode="widthFix"></image> <image src="/static/template/scroll-fold-nav/search.png" style="width: 15px;" mode="widthFix"></image>
<text class="search-tip-text">请输入你要搜索的内容</text> <text class="search-tip-text">请输入你要搜索的内容</text>
</view> </view>
<text class="search-btn">搜索</text> <text class="search-btn">搜索</text>
</view> </view>
<view v-for="(item,index) in list" :key="index" class="item"> <view v-for="(item,index) in list" :key="index" class="content-item">
second content-{{item}} <text class="text">second content-{{item}}</text>
</view> </view>
<view v-for="(item,index) in list" :key="index" class="item"> <view v-for="(item,index) in list" :key="index" class="content-item">
second content-{{item}} <text class="text">second content-{{item}}</text>
</view> </view>
</scroll-view> </scroll-view>
</template> </template>
<script> <script>
import ScrollEvent from 'io.dcloud.uniapp.runtime.ScrollEvent'; import ScrollEvent from 'io.dcloud.uniapp.runtime.ScrollEvent';
export default { export default {
data() { data() {
return { return {
list: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15'], list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15'],
stickyTop: 0, stickyTop: 0,
stickyTran: 0, stickyTran: 0,
scrollTop: 0, scrollTop: 0,
stickyNode: null as INode | null stickyNode: null as INode | null
} }
}, },
methods: { methods: {
onScroll(e : ScrollEvent) { onScroll(e : ScrollEvent) {
if(e.detail.scrollTop > this.stickyTop){ if (e.detail.scrollTop > this.stickyTop) {
let stickyTran = e.detail.scrollTop - this.stickyTop; let stickyTran = e.detail.scrollTop - this.stickyTop;
if(stickyTran!=this.stickyTran){ if (stickyTran != this.stickyTran) {
this.stickyNode?.style?.setProperty('transform','translateY('+stickyTran+'px)'); this.stickyNode?.style?.setProperty('transform', 'translateY(' + stickyTran + 'px)');
} }
this.stickyTran = stickyTran; this.stickyTran = stickyTran;
}else{ } else {
this.stickyNode?.style?.setProperty('transform',''); this.stickyNode?.style?.setProperty('transform', '');
this.stickyTran = 0; this.stickyTran = 0;
} }
}, },
back(){ back() {
uni.navigateBack({ uni.navigateBack({
success(result) { success(result) {
console.log('navigateBack success', result.errMsg) console.log('navigateBack success', result.errMsg)
}, },
fail(error) { fail(error) {
console.log('navigateBack fail', error.errMsg) console.log('navigateBack fail', error.errMsg)
}, },
complete(result) { complete(result) {
console.log('navigateBack complete', result.errMsg) console.log('navigateBack complete', result.errMsg)
}, },
}) })
} }
}, },
onLoad() { onLoad() {
}, },
onReady() { onReady() {
this.stickyNode = this.$refs['sticky'] as INode; this.stickyNode = this.$refs['sticky'] as INode;
// let rect = this.stickyNode?.getBoundingClientRect(); // let rect = this.stickyNode?.getBoundingClientRect();
// this.stickyTop = rect?.top; // this.stickyTop = rect?.top;
//this.stickyTop = this.stickyNode?.getBoundingClientRect()?.top; //this.stickyTop = this.stickyNode?.getBoundingClientRect()?.top;
let rect = (this.$refs['sticky'] as INode).getBoundingClientRect(); let rect = (this.$refs['sticky'] as INode).getBoundingClientRect();
this.stickyTop = rect.top; this.stickyTop = rect.top;
}
} }
}
</script> </script>
<style> <style>
.page { .page {
flex: 1; flex: 1;
background-color: azure; padding: 5px 15px;
} background-color: #f5f5f5;
}
.item {
height: 100px; .content-item {
} padding: 15px;
margin: 5px 0;
.search { background-color: #fff;
background-color: #FFFFFF; border-radius: 5px;
border: 1px solid #fbdf0d;
height: 35px; }
border-radius: 100px;
margin: 0 25rpx; .text {
padding: 8px; font-size: 14px;
flex-direction: row; color: #666;
align-items: center; line-height: 20px;
justify-content: space-between; }
z-index: 100;
}
.search-tip-text {
font-size: 12px;
color: #666;
}
.search-btn {
font-size: 12px;
background-color: #ff6900;
color: #FFF;
padding: 5px 8px;
border-radius: 100px;
}
.search {
background-color: #FFFFFF;
border: 1px solid #fbdf0d;
height: 35px;
border-radius: 100px;
margin: 0 25rpx;
padding: 8px;
flex-direction: row;
align-items: center;
justify-content: space-between;
z-index: 100;
}
.search-tip-text {
font-size: 12px;
color: #666;
}
.search-btn {
font-size: 12px;
background-color: #ff6900;
color: #FFF;
padding: 5px 8px;
border-radius: 100px;
}
</style> </style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或