微信小程序 顶部搜索 吸顶 不随页面滚动而滚动

已于 2023-04-28 17:56:58 修改
阅读量3.3k 收藏 25
点赞数 2
文章标签： 微信小程序 前端 javascript
于 2023-04-28 11:33:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45689786/article/details/130423168
版权

微信小程序 商城：

主要用于商城类小程序：

微信小程序 搜索框 顶部吸顶 顶部购物车栏固定 不随页面滚动而滚动

示例:
在这里插入图片描述

结构分析

在这里插入图片描述
可以看到分为三部分--头部搜索框--中间商品区域(可滚动)----底部购物车(固定底部)

  • 头部搜索框
    在这里插入图片描述

最大的盒子宽高100% 头部盒子需要有固定高度 flex布局 flex-flow: column; (为了中间部分能撑起剩下高度)

<view class="container">
    <view class="top-box">
        <!-- 搜索 -->
        <view class="search-box">
            <view class="search-icon"></view>
            <input class="search-input" value="" type="text" placeholder="搜索您要采购的商品" placeholder-style="" placeholder-class="input-placeholder" bindinput="getGoodsFunc" />
        </view>
    </view>
</view>
  • css
page {
  width: 100%;
  height: 100%;
  background: #f4f6ff;
}
.container{
  display: flex;
  flex-flow: column;
  width: 100%;
  height: 100%;
}

.search-box {
  height: 180rpx;
  background: pink;
}
.top-box {
  width: 100%;
  height: 180rpx;
}
/* 不显示滚动条 */
::-webkit-scrollbar {
  display: none;
}
.search-box {
  position: relative;
  margin: 30rpx 18rpx 20rpx 22rpx;
  height: 80rpx;
}
.search-icon {
  width: 36rpx;
  height: 35rpx;
  background: url(https://static.sprucesmart.com/hbsk/abis/20230423/search-icon.png)
    no-repeat center center;
  background-size: 100% 100%;
  position: absolute;
  top: 13rpx;
  left: 30rpx;
}
.input-placeholder {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #727272;
  line-height: 30rpx;
  opacity: 0.6;
}
.search-input {
  width: 710rpx;
  height: 60rpx;
  background: #ffffff;
  border-radius: 30rpx;
  line-height: 60rpx;
  padding-left: 77rpx;
  box-sizing: border-box;
}
  • 中间盒子部分

flex:1;撑起剩余高度;position: relative;子元素在父元素内 position: absolute; left: 0;top: 0;bottom: 0;right: 0;

在这里插入图片描述

   <view class="middle-box">
        <scroll-view scroll-y scroll-with-animation scroll-into-view="{{toTitle}}" class="good-item">
            <block>
                <view class="goods-box">
                    <view wx:for="{{rights}}" wx:key="index" wx:for-item="item" class="goods" id="scroll-{{index}}">
                        <image class="good-img" src="{{item.src}}" bindtap="goGoodsDetailFunc" data-id="{{item.id}}"></image>
                        <view>
                            <view class="goods-name">{{item.title}}</view>
                            <view class="good-add">
                                <view class="goods-price">
                                    <span class="dollar">￥</span>
                                    <span>{{item.sales_price}}</span>
                                </view>
                                <view class="big-card-box" catchtap="addGoodsFunc" data-id="{{item.id}}" data-num="{{item.num}}" data-item="{{item}}">
                                    <view class="add-card"></view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </block>
        </scroll-view>
    </view>
  • css
  .middle-box {
    /* 达到高度自适应 */
    flex: 1 !important;
    position: relative;
  }
  .good-item {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    flex: 0 0 100rpx;
    padding: 26rpx 15rpx 39rpx 15rpx;
    box-sizing: border-box;
  }
  .goods-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    /* background: #ffffff; */
    border-radius: 30px 30px 0px 0px;
    padding-bottom: 460rpx;
    margin-top: 20rpx;
  }
  
  .good-img {
    width: 352rpx;
    height: 350rpx;
  }
  
  .goods-name {
    width: 339rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #242424;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all; /* 追加这一行代码 */
    -webkit-line-clamp: 1;
  }
  .good-add {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10rpx 0;
    box-sizing: border-box;
  }
  
  .goods-price {
    font-size: 40rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #f43d19;
  }
  
  .dollar {
    font-size: 28rpx;
  }
  .big-card-box {
    width: 50rpx;
    height: 50rpx;
   
  }
  .add-card {
    width: 30rpx;
    height: 30rpx;
    background: url(https://static.sprucesmart.com/hbsk/abis/20230423/add-card-icon.png)
      no-repeat center;
    background-size: 100% 100%;
    margin: 10rpx;
  }
  • 底部购物车
    有固定宽高就可以了
    在这里插入图片描述
 <!-- 加入购物车 -->
    <view class="add-card-box">
        <view class="add-card-left" catchtap="goCardFunc">
            <view class="dot" animation='{{ani}}' hidden="{{!showdot}}">+1</view>
            <span class="num" wx:if="{{cardNum > 0}}">{{cardNum}}</span>
            <view class="card-icon" id="shopcar"></view>
            <view>购物车</view>
        </view>
        <view class="add-card-right" bindtap="submitOrderFunc" wx:if="{{cardNum > 0}}">提交订单</view>
        <view class="add-card-right1" wx:else>提交订单</view>
    </view>
  • css
  .add-card-box {
    /* position: fixed; */
    /* bottom: 0; */
    /* left: 0; */
    width: 750rpx;
    height: 128rpx;
    background: #ffffff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    z-index: 888;
    padding: 21rpx 29rpx 27rpx 38rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #2f3137;
  }
  .add-card-left {
    position: relative;
  }
  
  .num {
    display: inline-block;
    background: #ffffff;
    border: 2rpx solid #f62a19;
    border-radius: 16rpx;
    font-size: 22rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #f62a19;
    padding: 0 13rpx;
    box-sizing: border-box;
    position: absolute;
    top: -19rpx;
    left: 24rpx;
  }
  .card-icon {
    width: 46rpx;
    height: 45rpx;
    background: url(https://static.sprucesmart.com/hbsk/abis/20230423/card-icon.png)
      no-repeat center;
    background-size: 100% 100%;
  }
  
  .add-card-right {
    width: 210rpx;
    height: 72rpx;
    background: linear-gradient(124deg, #f2170c 0%, #ff6600 100%);
    border-radius: 36rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 72rpx;
    text-align: center;
  }
  .add-card-right1 {
    width: 210rpx;
    height: 72rpx;
    background: #ccc;
    border-radius: 36rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 72rpx;
    text-align: center;
  }
  .card-pop {
    width: 100%;
    max-height: 460rpx;
    overflow-y: scroll;
    background: #fff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    padding: 50rpx 28rpx 31rpx 28rpx;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    bottom: 135rpx;
    /* z-index: 999; */
  }
  .card-box {
    border-bottom: 2rpx solid #f2f2f2;
  }
  .card-box:last-child {
    border: none;
  }
  .card-title {
    width: 694rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #242424;
    margin-top: 24rpx;
    /* white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-line-clamp: 1; */
  }
  .card-price {
    font-size: 40rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #f43d19;
    margin-right: 126rpx;
    width: 200rpx;
  }
  .card-edit {
    margin-top: 31rpx;
    display: flex;
    margin-left: 172rpx;
    margin-bottom: 31rpx;
  }
  .edit-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .reduce {
    width: 16rpx;
    height: 4rpx;
    background: url(https://static.sprucesmart.com/hbsk/abis/20230423/recduce-icon.png)
      no-repeat center;
    background-size: 100% 100%;
    margin-right: 15rpx;
  }
  .no-reduce {
    width: 16rpx;
    height: 4rpx;
    background: url(https://static.sprucesmart.com/hbsk/abis/20230423/no-reduce-icon.png)
      no-repeat center;
    background-size: 100% 100%;
    margin-right: 15rpx;
  }
  .add {
    width: 16rpx;
    height: 16rpx;
    background: url(https://static.sprucesmart.com/hbsk/abis/20230423/add-icon.png)
      no-repeat center;
    background-size: 100% 100%;
    margin-left: 15rpx;
  }
  .number {
    width: 71rpx;
    height: 34rpx;
    line-height: 34rpx;
    background: #f1f1f1;
    border-radius: 6rpx;
    font-size: 22rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #2f3137;
    text-align: center;
  }
  .box {
    width: 80rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

完整代码：

html

<view class="container">
    <view class="top-box">
        <!-- 搜索 -->
        <view class="search-box">
            <view class="search-icon"></view>
            <input class="search-input" value="" type="text" placeholder="搜索您要采购的商品" placeholder-style="" placeholder-class="input-placeholder" bindinput="getGoodsFunc" />
        </view>
    </view>
    <view class="middle-box">
        <scroll-view scroll-y scroll-with-animation scroll-into-view="{{toTitle}}" class="good-item">
            <block>
                <view class="goods-box">
                    <view wx:for="{{rights}}" wx:key="index" wx:for-item="item" class="goods" id="scroll-{{index}}">
                        <image class="good-img" src="{{item.src}}" bindtap="goGoodsDetailFunc" data-id="{{item.id}}"></image>
                        <view>
                            <view class="goods-name">{{item.title}}</view>
                            <view class="good-add">
                                <view class="goods-price">
                                    <span class="dollar">￥</span>
                                    <span>{{item.sales_price}}</span>
                                </view>
                                <view class="big-card-box" catchtap="addGoodsFunc" data-id="{{item.id}}" data-num="{{item.num}}" data-item="{{item}}">
                                    <view class="add-card"></view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </block>
        </scroll-view>
    </view>
    <!-- 加入购物车 -->
    <view class="add-card-box">
        <view class="add-card-left" catchtap="goCardFunc">
            <view class="dot" animation='{{ani}}' hidden="{{!showdot}}">+1</view>
            <span class="num" wx:if="{{cardNum > 0}}">{{cardNum}}</span>
            <view class="card-icon" id="shopcar"></view>
            <view>购物车</view>
        </view>
        <view class="add-card-right" bindtap="submitOrderFunc" wx:if="{{cardNum > 0}}">提交订单</view>
        <view class="add-card-right1" wx:else>提交订单</view>
    </view>
</view>

css

page {
    width: 100%;
    height: 100%;
    background: #f4f6ff;
  }
  .container {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }
  .search-box {
    height: 100rpx;
  }
  .top-box {
    width: 100%;
    height: 100rpx;
  }
  /* 不显示滚动条 */
  ::-webkit-scrollbar {
    display: none;
  }
  .search-box {
    position: relative;
    margin: 30rpx 18rpx 20rpx 22rpx;
    height: 80rpx;
  }
  .search-icon {
    width: 36rpx;
    height: 35rpx;
    background: url(https://static.sprucesmart.com/hbsk/abis/20230423/search-icon.png)
      no-repeat center center;
    background-size: 100% 100%;
    position: absolute;
    top: 13rpx;
    left: 30rpx;
  }
  .input-placeholder {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #727272;
    line-height: 30rpx;
    opacity: 0.6;
  }
  .search-input {
    width: 710rpx;
    height: 60rpx;
    background: #ffffff;
    border-radius: 30rpx;
    line-height: 60rpx;
    padding-left: 77rpx;
    box-sizing: border-box;
  }


  /* 二级弹窗 */
  .menubg {
    display: none;
    position: fixed;
    top: 180rpx;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 99999999;
  }

  .middle-box {
    /* 达到高度自适应 */
    flex: 1 !important;
    position: relative;
  }
  .good-item {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    flex: 0 0 100rpx;
    padding: 26rpx 15rpx 39rpx 15rpx;
    box-sizing: border-box;
  }
  .goods-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    /* background: #ffffff; */
    border-radius: 30px 30px 0px 0px;
    padding-bottom: 460rpx;
    margin-top: 20rpx;
  }
  
  .good-img {
    width: 352rpx;
    height: 350rpx;
  }
  
  .goods-name {
    width: 339rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #242424;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all; /* 追加这一行代码 */
    -webkit-line-clamp: 1;
  }
  .good-add {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10rpx 0;
    box-sizing: border-box;
  }
  
  .goods-price {
    font-size: 40rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #f43d19;
  }
  
  .dollar {
    font-size: 28rpx;
  }
  .big-card-box {
    width: 50rpx;
    height: 50rpx;
   
  }
  .add-card {
    width: 30rpx;
    height: 30rpx;
    background: url(https://static.sprucesmart.com/hbsk/abis/20230423/add-card-icon.png)
      no-repeat center;
    background-size: 100% 100%;
    margin: 10rpx;
  }
  .add-card-box {
    /* position: fixed; */
    /* bottom: 0; */
    /* left: 0; */
    width: 750rpx;
    height: 128rpx;
    background: #ffffff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    z-index: 888;
    padding: 21rpx 29rpx 27rpx 38rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #2f3137;
  }
  .add-card-left {
    position: relative;
  }
  
  .num {
    display: inline-block;
    background: #ffffff;
    border: 2rpx solid #f62a19;
    border-radius: 16rpx;
    font-size: 22rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #f62a19;
    padding: 0 13rpx;
    box-sizing: border-box;
    position: absolute;
    top: -19rpx;
    left: 24rpx;
  }
  .card-icon {
    width: 46rpx;
    height: 45rpx;
    background: url(https://static.sprucesmart.com/hbsk/abis/20230423/card-icon.png)
      no-repeat center;
    background-size: 100% 100%;
  }
  
  .add-card-right {
    width: 210rpx;
    height: 72rpx;
    background: linear-gradient(124deg, #f2170c 0%, #ff6600 100%);
    border-radius: 36rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 72rpx;
    text-align: center;
  }
  .add-card-right1 {
    width: 210rpx;
    height: 72rpx;
    background: #ccc;
    border-radius: 36rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 72rpx;
    text-align: center;
  }
  .card-pop {
    width: 100%;
    max-height: 460rpx;
    overflow-y: scroll;
    background: #fff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    padding: 50rpx 28rpx 31rpx 28rpx;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    bottom: 135rpx;
    /* z-index: 999; */
  }
  .card-box {
    border-bottom: 2rpx solid #f2f2f2;
  }
  .card-box:last-child {
    border: none;
  }
  .card-title {
    width: 694rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #242424;
    margin-top: 24rpx;
    /* white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-line-clamp: 1; */
  }
  .card-price {
    font-size: 40rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #f43d19;
    margin-right: 126rpx;
    width: 200rpx;
  }
  .card-edit {
    margin-top: 31rpx;
    display: flex;
    margin-left: 172rpx;
    margin-bottom: 31rpx;
  }
  .edit-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .reduce {
    width: 16rpx;
    height: 4rpx;
    background: url(https://static.sprucesmart.com/hbsk/abis/20230423/recduce-icon.png)
      no-repeat center;
    background-size: 100% 100%;
    margin-right: 15rpx;
  }
  .no-reduce {
    width: 16rpx;
    height: 4rpx;
    background: url(https://static.sprucesmart.com/hbsk/abis/20230423/no-reduce-icon.png)
      no-repeat center;
    background-size: 100% 100%;
    margin-right: 15rpx;
  }
  .add {
    width: 16rpx;
    height: 16rpx;
    background: url(https://static.sprucesmart.com/hbsk/abis/20230423/add-icon.png)
      no-repeat center;
    background-size: 100% 100%;
    margin-left: 15rpx;
  }
  .number {
    width: 71rpx;
    height: 34rpx;
    line-height: 34rpx;
    background: #f1f1f1;
    border-radius: 6rpx;
    font-size: 22rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #2f3137;
    text-align: center;
  }
  .box {
    width: 80rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .dot {
    top: 0;
    left: 0;
    position: fixed;
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    background: #f43d19;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
    color: white;
    z-index: 10000;
  }

js

 rights: [
      {
        src: 'https://static.sprucesmart.com/hunanapp/turn/spring/5-oil-icon.png',
        name: "昆仑润滑油 天润KR8全...",
        id: 1,
        num: 122,
        price: 188
      },
      {
        src: 'https://static.sprucesmart.com/hunanapp/turn/spring/5-oil-icon.png',
        name: "商品二",
        id: 2,
        num: 123,
        price: 18
      },
      {
        src: 'https://static.sprucesmart.com/hunanapp/turn/spring/5-oil-icon.png',
        name: "商品三",
        id: 3,
        num: 124,
        price: 99
      },
      {
        src: 'https://static.sprucesmart.com/hunanapp/turn/spring/5-oil-icon.png',
        name: "商品一",
        id: 1,
        num: 122,
        price: 188
      },
      {
        src: 'https://static.sprucesmart.com/hunanapp/turn/spring/5-oil-icon.png',
        name: "商品二",
        id: 2,
        num: 123,
        price: 18
      },
      {
        src: 'https://static.sprucesmart.com/hunanapp/turn/spring/5-oil-icon.png',
        name: "商品三",
        id: 3,
        num: 124,
        price: 99
      },
      {
        src: 'https://static.sprucesmart.com/hunanapp/turn/spring/5-oil-icon.png',
        name: "商品一",
        id: 1,
        num: 122,
        price: 188
      },
      {
        src: 'https://static.sprucesmart.com/hunanapp/turn/spring/5-oil-icon.png',
        name: "商品二",
        id: 2,
        num: 123,
        price: 18
      },
      {
        src: 'https://static.sprucesmart.com/hunanapp/turn/spring/5-oil-icon.png',
        name: "商品三",
        id: 3,
        num: 124,
        price: 99
      }
    ],
迟好~
关注
  • 2
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
小程序中的吸顶效果（小程序操作DOM）
2401_84123380的博客
04-20 785
滚动容器scroll-y吸顶位置内容 2内容 3加载中…没有更多了数据加载失败,请重试。
微信小程序scroll-view+自定义导航栏+sticky元素吸顶
weixin_45446474的博客
01-05 853
微信小程序scroll-view+自定义导航栏+sticky元素吸顶
esp32~mp3播放实例解析，Android开发进大厂面试必备技能
最新发布
2401_84150102的博客
04-07 806
/ 将mp3_music_read_cb mp3_decoder i2s_stream codec_chip关联在一起。
微信小程序（固定头部，隐藏滚动条）
VueJiang的博客
05-23 2035
开发微信小程序时，有时设置页面样式，需要用到头部固定，内容滚动，下面看看怎么做的吧！ ##方法一： 1：固定元素 需要固定的元素盒子设置样式： .box{ position: fixed; top: 0; width: 100%; } 2：隐藏滚动条 父元素设置： .fatherBox{ width: 100vw; height: 100vh; overflow-x: hidden; overflow-y: auto; } 滚动条所在的盒元素设置： .songBox::-we
【微信小程序】ec-canvas不跟随页面上下滚动
weixin_45326220的博客
08-11 770
小程序中canvas不跟随页面滚动
小程序吸顶悬停
Ripe_L的博客
04-04 358
通过js监听滚动事件，达到距离后，改变需要吸顶元素的样式，典型的如：position: fixed。元素脱离了文档流，为避免其他元素改变位置，还需要设置一占位元素。position sticky只在一些比较新的浏览器上才支持，不过实验了一下，发现现在各个小程序平台都是支持的！另外，因为需要监听滚动事件，效率也是比较低的。现在在小程序中有了一种更加简单高效的实现方式，就是：position sticky。过去常见的实现方法就是通过js监听滚动事件然后改变需要吸顶悬停元素的css来实现。
【小程序】固定导航栏在顶部，跟随下滑
Z_hongli的博客
11-17 2759
【小程序】固定导航栏在顶部，跟随下滑一、效果演示二、实现原理三、相关代码1.说明（一定要看）1.wxml2.wxss3.js 一、效果演示 二、实现原理 在js中有一个函数是用来监听页面的滑动的，这个函数叫做onPageScroll，下面是我从官网上面查到的有关信息 我们可以利用这个函数的功能，获取页面在垂直方向已经滚动的距离，当滚动的距离达到一定数值时，我们通过js来改变样式，让原有的模块固定住不再移动 三、相关代码 1.说明（一定要看） 我把整个页面的代码全部拷过来了，wxml中最上面的部分是导航栏
微信小程序顶部栏图片随页面滚动渐变展示隐藏
04-18
小程序顶部通栏，展示图片，随着页面滚动，开始渐变展标题记及纯色吸顶样式 主要使用了小程序中的scroll-view组件，通过滚动时触发 bindscroll和滚动到顶部 bindscrolltoupper改变顶部栏的样式效果 动图效果及使用...
微信小程序顶部可滚动导航效果
08-28
微信小程序顶部可滚动导航效果 微信小程序顶部可滚动导航效果是指在微信小程序中实现顶部可滚动的导航分类效果。该效果通过使用 scroll-view 组件横向滚动，类似 tab 选项卡的效果，内容使用类似模板方式引用，可以...
微信小程序wxs实现吸顶效果
10-15
在微信小程序中，吸顶效果通常用于实现一种固定在屏幕顶部的导航栏，即使当用户向下滚动内容时，这个导航栏依然保持可见。这个效果在许多应用和网站中都很常见，能够提供良好的用户体验，使用户始终能快速访问导航...
微信小程序实现吸顶特效
10-15
主要为大家详细介绍了微信小程序实现吸顶特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序----position:sticky
12-20
微信小程序----position:sticky:通过position:fixed与position:relative切换。
微信小程序sticky吸顶效果.zip
07-24
在微信小程序中，实现“sticky”（吸顶）效果是一项常见的需求，特别是在设计滚动列表时，需要某些元素如导航栏或广告条在页面滚动到一定位置时固定在顶部，以便用户在浏览过程中始终保持可见。本压缩包文件"微信小...
微信小程序实现列表滚动头部吸顶的示例代码
10-15
在微信小程序中，实现列表滚动时头部吸顶的效果是一项常见的需求，这有助于用户在浏览长列表时保持关键信息可见。本示例将详细介绍如何利用微信小程序的特性来完成这一功能。 首先，我们要知道在CSS中，`position: ...
微信小程序实现吸顶效果
皮皮的博客
11-10 3682
微信小程序实现吸顶效果 这篇文章主要为大家详细介绍了微信小程序实现吸顶效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 最开始的时候，在小程序中实现吸顶效果，开发工具看起来还挺好的，但是在真机上就会有问题了。 原因是我不停的去 setData 会导致操作反馈延迟严重，无法及时将操作处理结果及时传递到视图层。 后面就对代码进行了调整，避免不停的去setData 效果图 吸顶前 吸顶后 代码部分 wxml <view style="width: 90%; hei
[微信小程序]搜索功能实现,搜索框样式
热门推荐
a_靖的博客
11-28 13万+
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： 上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 <view class='page_row' bindtap="suo"> <view class="search"> <view cla...
微信小程序上方搜索框解决方法
qq_41641760的博客
12-16 4129
微信小程序上方搜索框： wxml: 搜索 wss: .header{ line-height: 1; height:74rpx; padding:12rpx 15rpx; box-sizing: border-box; /* background:#10BBFF; / background: #F5F5F5; position:relative; } .color{ color:b...
微信小程序回到顶部的两种方式
sxs1995的博客
04-26 6万+
一,使用view形式的回到顶部 HTML： &amp;lt;image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' bindtap=&quot;goTop&quot;&amp;gt;&amp;lt;/image&amp;gt; CSS： /* 返回顶部 */ .goTop{ height: 80rpx; width: 80rpx...
vue 监听页面滚动 实现元素吸顶或者固定位置
09-07
在Vue中实现元素吸顶或固定位置的方式是通过监听页面滚动事件并动态改变元素的样式或位置。具体步骤如下： 1. 在Vue的组件中，通过`mounted`钩子函数监听页面滚动事件： ``` mounted() { window.addEventListener('scroll', this.handleScroll); } ``` 2. 在`methods`中定义`handleScroll`方法来处理滚动事件，并使用`scrollTop`属性获取页面滚动位置： ``` methods: { handleScroll() { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 根据scrollTop的值来决定元素的样式或位置 // ... } } ``` 3. 在模板中，使用动态绑定的方式来设置元素的样式或位置。可以通过绑定CSS类名或行内样式实现，以下是两种常见的实现示例： - 使用CSS类名： 在data中定义一个`isFixed`变量，根据滚动位置的条件来切换`isFixed`的值，在模板中绑定CSS类名根据`isFixed`的值设置元素的样式： ``` data() { return { isFixed: false, }; }, methods: { handleScroll() { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 根据scrollTop的值来判断是否满足条件，如果满足条件则设置isFixed为true，否则为false this.isFixed = scrollTop > 100; }, }, ``` 在模板中绑定CSS类名，并设置元素的样式： ``` <div :class="{ 'fixed': isFixed }">固定的元素</div> <style> .fixed { position: fixed; top: 0; left: 0; } </style> ``` - 使用行内样式： 直接通过绑定`style`属性来设置元素的样式： ``` data() { return { topPosition: 0, }; }, methods: { handleScroll() { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 根据scrollTop的值来判断是否满足条件，如果满足条件则设置topPosition为固定的位置，否则为0 this.topPosition = scrollTop > 100 ? '100px' : '0'; }, }, ``` 在模板中绑定行内样式： ``` <div :style="{ top: topPosition }">固定的元素</div> ``` 通过以上步骤就可以实现元素吸顶或固定位置的效果了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值