优酷 做视频网站还能成功吗,现成ppt免费下载,wordpress主题位置,米课做网站效果如图#xff1a; 实现思路#xff1a;
1、使用onPageScroll监听页面滚动#xff0c;改变导航条的透明度#xff1b;
2、关于顶部图片的高度#xff1a;
如果是小程序#xff1a;使用getMenuButtonBoundingClientRect获取胶囊顶部距离和胶囊高度#xff1b;
如果… 效果如图 实现思路
1、使用onPageScroll监听页面滚动改变导航条的透明度
2、关于顶部图片的高度
如果是小程序使用getMenuButtonBoundingClientRect获取胶囊顶部距离和胶囊高度
如果是H5给个自定义高度就行
3、透明度opacity的计算公式1 - (this.imgHeight - e.scrollTop) / this.imgHeight
4、相关组件绑定行内样式完活
完整代码
templateview class!-- 顶部导航 --fa-navbar :titlevuex_table_title || 宝乐名车服务 refnavbar:style[{opacity:opacity},{position:fixed},{zIndex:999}]/fa-navbar!-- 顶部图片 --view classhead_img :style[{overflow: hidden},{height:imgHeightpx}]img :style{width: 100%}srchttps://sa.ffep.online:20093/uploads/20240907/590a5bb30e86dbbbe6a9172a41ba157a.png alt //view!-- 搜索 --view classu-p-20 u-bg-white u-flex u-col-center v-ifis_showview classu-flex-1fa-search :mode2/fa-search/viewview classu-p-l-15 u-p-r-5 u-flex u-col-center v-ifis_orderfa-orderby-select :filterListfilterList :orderListorderList :multipletruechangegoOrderBy/fa-orderby-select/view/view!-- 分类 --view classu-border-top v-ifisTabu-tabs :listtabList :active-colortheme.bgColor :bar-widthtabwidth nametitle :is-scrolltrue:currentcurrent changechange/u-tabs/view!-- 轮播图 --view class v-ifis_showu-swiper :titletrue border-radius0 height320 :listbannerList clickopenPage/u-swiper/view!-- 列表 --fa-article-item :archives-listarchivesList/fa-article-item!-- 为空 --view classu-m-t-60 u-p-t-60 v-ifis_emptyu-empty text暂无内容展示 modelist/u-empty/view!-- 加载更多 --view classu-p-30 v-ifarchivesList.lengthu-loadmore bg-color#f4f6f8 :statusstatus //view!-- 回到顶部 --u-back-top :scroll-topscrollTop :icon-style{ color: theme.bgColor }:custom-style{ backgroundColor: lightColor }/u-back-top!-- 底部导航 --fa-tabbar/fa-tabbar/view
/templatescriptimport {archives} from /common/fa.mixin.js;export default {mixins: [archives],computed: {bannerList() {return this.vuex_config.bannerList || [];}},watch: {},onPageScroll(e) {let calc 1 - (this.imgHeight - e.scrollTop) / this.imgHeight;this.opacity calc},data() {return {imgHeight: 0,opacity: 0};},onLoad(e) {// #ifdef MP-WEIXIN || APP-PLUS// 获取状态栏和胶囊位置const {top,height} uni.getMenuButtonBoundingClientRect()this.imgHeight (top height10)*1.5;// #endif// #ifdef H5this.imgHeight 100;// #endiflet query e;if (JSON.stringify(query) {}) {query e;}if (query JSON.stringify(query) ! {}) {this.params query;} else {this.params {channel: -1,model: -1}}this.getCategory();this.getArchives();},methods: {},};
/scriptstyle langscss.head_img {// position: fixed;top: 0;left: 0;width: 100%;transition: opacity 0.2s ease;/* 平滑过渡 */}page {background-color: #f4f6f8;}
/style
