当前位置：首页 > news >正文

如何做外卖网站产品seo标题是什么

news 2025/7/16 6:32:43

如何做外卖网站,产品seo标题是什么,邮件订阅 wordpress,网站未备案的后果前言新业务开发用到了吸顶效果而且是一个页面滚动到不同的位置不同的元素进行吸顶叠加。我是基于uniapp去写的，原理思路都一样代码部分下面的代码我写了两种方法都是一样的一个是通过js控制变量添加元素一个是直接通过css样式进行控制 <!-- 上半部总览位置…

前言

新业务开发用到了吸顶效果而且是一个页面滚动到不同的位置不同的元素进行吸顶叠加。我是基于uniapp去写的，原理思路都一样

代码部分

下面的代码我写了两种方法都是一样的一个是通过js控制变量添加元素一个是直接通过css样式进行控制

		<!-- 上半部总览位置 --><view :class="{user_Overview:true}">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</view><!-- 中间搜索框 --><view  :class="{input_box:true,stickystyle2:stickystyle2}">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</view><script>
import {getCurrentDate} from '@/common/util.js'export default {data() {return {stickystyle2:false,}methods: {//离开这个页面的时候栏吸顶效果消失onUnload(){this.stickystyle1=false;this.stickystyle2=false;},onPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替// console.log("滚动距离为：" + e.scrollTop);if(e.scrollTop>380){this.stickystyle2=true}else{this.stickystyle2=false}},}}</script><style>//第一中方式直接设置position: fixed;，但是该元素不触发吸顶的时候脱离文档流后面的元素会补位，//所以需要给后一个元素进行设置padding-top或者maigin-top值就是该元素的高度//这个地方设置position: sticky;也是可以的.user_Overview{width: 750rpx;height: 70rpx;// border: 1px solid red;display: flex;position: fixed;top: 0;left: 0;z-index: 99;justify-content: space-between;padding:0rpx 32rpx;background-image: linear-gradient(180deg, #FFE7D2 0%, #FFE7D2 100%);}.input_box{padding:16rpx 32rpx 16rpx 32rpx;background: #FFFFFF;height: 100rpx;}.stickystyle2{position: fixed;top: 70rpx;left: 0;width: 100%;z-index: 999;// #ifdef APP-PLUStop: 158rpx;left: 0;// #endif}</style>