1. Toy模板网首页
  2. > Toy博客

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

7月前 作者：迟好~ 分类：Toy博客 阅读(40) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序 顶部搜索 吸顶 不随页面滚动而滚动。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序 商城：

主要用于商城类小程序：

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

示例:
微信小程序顶部搜索栏,微信小程序,前端,javascript

结构分析

微信小程序顶部搜索栏,微信小程序,前端,javascript
可以看到分为三部分--头部搜索框--中间商品区域(可滚动)----底部购物车(固定底部)

  • 头部搜索框
    微信小程序顶部搜索栏,微信小程序,前端,javascript

最大的盒子宽高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;

微信小程序顶部搜索栏,微信小程序,前端,javascript

   <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;
  }
  • 底部购物车
    有固定宽高就可以了
    微信小程序顶部搜索栏,微信小程序,前端,javascript 
 <!-- 加入购物车 -->
    <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文章来源地址https://www.toymoban.com/news/detail-526921.html

 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
      }
    ],

到了这里，关于微信小程序 顶部搜索 吸顶 不随页面滚动而滚动的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序搜索框吸顶效果实现

    微信小程序搜索框吸顶效果实现

    主页要做一个搜索框，滑动主页页面的时候，搜索框始终位于导航栏下面，位置不变，不随页面的滑动而滑动，这种效果被称为”吸顶“效果。 点击搜索框，弹出上层搜索详情的视图层，搜索详情的整个页面覆盖在主页面之上，并且也覆盖住主要搜索框。 主页搜搜框设置

    2024年02月13日
    浏览(41)
  • 微信小程序——顶部搜索框

    微信小程序——顶部搜索框

    一点小小的声明：学习笔记，若有不妥之处还望指正，Thanks♪(･ω･)ﾉ 参考视频微信小程序实例——从入门到精通 效果展示： 步骤：  首先需要建立一个存放图片的文件夹images，该文件夹放置在最外层。将此图放入文件夹。后续需要使用的图片也都可以放入此文件夹中。

    2024年02月11日
    浏览(32)
  • 微信小程序顶部搜索栏随界面滑动变换

    微信小程序顶部搜索栏随界面滑动变换

    初始状态： 目标状态：   效果：在界面向下滑动的时候，根据滑动的距离，缩短搜索框，并向上滑动 第一步：使用小程序的生命周期onPageScroll接听界面滚动，并获取下滑距离                 因为在本案例中，我胶囊顶部与默认状态下的搜索框顶部距离为74rpx，所以，我只

    2024年02月15日
    浏览(35)
  • 微信小程序 顶部搜索框滑动伸缩效果的实现

    微信小程序 顶部搜索框滑动伸缩效果的实现

    提示：实现搜索框跟随用户滑动页面，实现伸缩效果 微信小程序 顶部搜索框滑动伸缩动画的实现 提示：主要用到了微信小程序的view-scroll bindscroll 1：确定一个控制搜索框伸缩的范围。 2：通过bindscroll事件获取e.detail.scrollTop；即用户滑动的位置 3：计算当前位置占伸缩范围的

    2024年02月12日
    浏览(26)
  • uni-app+ts----微信小程序锚点定位 、自动吸顶、滚动自动选择对应的锚点（点击tab跳转对应的元素位置）

    uni-app+ts----微信小程序锚点定位 、自动吸顶、滚动自动选择对应的锚点（点击tab跳转对应的元素位置）

    html代码部分 重点是给元素加入【 :id=“‘item’ + item.id”】 2.JS代码部分

    2024年02月21日
    浏览(35)

  • 微信小程序内嵌h5页面，实现动态设置顶部标题的功能

    一、需求描述 使用HBuilder X作为开发工具，vue作为开发语言，开发微信小程序。微信小程序页面内嵌h5页面，即web-view/web-view标签。通过设置不同url连接地址，设置不同的标题。 二、失败做法 页面A嵌入h5页面，需要给A设置标题。最开始写法是在lonload页面内，使用如下语句实现

    2024年02月04日
    浏览(39)
  • 微信小程序云开发之自定义顶部导航栏搜索框（非组件）

    微信小程序云开发之自定义顶部导航栏搜索框（非组件）

    提到微信小程序，就不得不提到它那磨人的顶部导航栏，真的有被丑到。身为强迫症患者，笔者实在是难以忍受，好在官方提供了解决方案，但是对于初学者还是有一丢丢的难度，为了初学者不在重蹈笔者的老路，这篇文章就给大家分享一下如何做一个好看的自定义顶部导航

    2024年02月10日
    浏览(32)
  • uni-app微信小程序，在页面顶部添加返回按键，返回上一个页面

    uni-app微信小程序，在页面顶部添加返回按键，返回上一个页面

    1.示例： 2.实现方式： 在page.json文件中的style里添加如下代码： 3.tips： 在page.json中的页面顺序就是小程序加载过程中的页面顺序

    2024年02月12日
    浏览(33)
  • 原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)

    原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)

    本文实例为大家分享了微信小程序自定义导航栏的具体代码，供大家参考，具体内容如下 实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 备注:  navigationStyle（导航栏样式），参数: default = 默认样式，custom = 自定义样式。  2.在页面.js文件onLoad生命

    2024年02月09日
    浏览(40)
  • uniapp使用Uview的Navbar自定义微信小程序顶部导航栏，滚动渐变透明效果；看完不会我下跪

    uniapp使用Uview的Navbar自定义微信小程序顶部导航栏，滚动渐变透明效果；看完不会我下跪

    2024年04月22日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包