国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網首頁
  2. >Toy博客

微信小程序 頂部搜索 吸頂 不隨頁面滾動而滾動

2年前作者：遲好~分類：Toy博客閱讀(20)違法舉報

這篇具有很好參考價值的文章主要介紹了微信小程序 頂部搜索 吸頂 不隨頁面滾動而滾動。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

微信小程序 商城：

主要用于商城類小程序：

微信小程序 搜索框 頂部吸頂 頂部購物車欄固定 不隨頁面滾動而滾動

示例:
微信小程序頂部搜索欄,微信小程序,前端,javascript

結構分析

微信小程序頂部搜索欄,微信小程序,前端,javascript
可以看到分為三部分--頭部搜索框--中間商品區(qū)域(可滾動)----底部購物車(固定底部)

  • 頭部搜索框
    微信小程序頂部搜索欄,微信小程序,前端,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文章來源地址http://www.zghlxwxcb.cn/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模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如若轉載，請注明出處： 如若內容造成侵權/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經查實，立即刪除！

領支付寶紅包贊助服務器費用

相關文章

  • 微信小程序搜索框吸頂效果實現

    微信小程序搜索框吸頂效果實現

    主頁要做一個搜索框，滑動主頁頁面的時候，搜索框始終位于導航欄下面，位置不變，不隨頁面的滑動而滑動，這種效果被稱為”吸頂“效果。 點擊搜索框，彈出上層搜索詳情的視圖層，搜索詳情的整個頁面覆蓋在主頁面之上，并且也覆蓋住主要搜索框。 主頁搜搜框設置

    2024年02月13日
    瀏覽(55)
  • 微信小程序——頂部搜索框

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

    一點小小的聲明：學習筆記，若有不妥之處還望指正，Thanks?(?ω?)? 參考視頻微信小程序實例——從入門到精通 效果展示： 步驟：? 首先需要建立一個存放圖片的文件夾images，該文件夾放置在最外層。將此圖放入文件夾。后續(xù)需要使用的圖片也都可以放入此文件夾中。

    2024年02月11日
    瀏覽(20)
  • 微信小程序 頂部搜索框滑動伸縮效果的實現

    微信小程序 頂部搜索框滑動伸縮效果的實現

    提示：實現搜索框跟隨用戶滑動頁面，實現伸縮效果 微信小程序 頂部搜索框滑動伸縮動畫的實現 提示：主要用到了微信小程序的view-scroll bindscroll 1：確定一個控制搜索框伸縮的范圍。 2：通過bindscroll事件獲取e.detail.scrollTop；即用戶滑動的位置 3：計算當前位置占伸縮范圍的

    2024年02月12日
    瀏覽(39)
  • 微信小程序頂部搜索欄隨界面滑動變換

    微信小程序頂部搜索欄隨界面滑動變換

    初始狀態(tài)： 目標狀態(tài)： ? 效果：在界面向下滑動的時候，根據滑動的距離，縮短搜索框，并向上滑動 第一步：使用小程序的生命周期onPageScroll接聽界面滾動，并獲取下滑距離 ? ? ? ? ? ? ? ? 因為在本案例中，我膠囊頂部與默認狀態(tài)下的搜索框頂部距離為74rpx，所以，我只

    2024年02月15日
    瀏覽(53)
  • uni-app+ts----微信小程序錨點定位 、自動吸頂、滾動自動選擇對應的錨點（點擊tab跳轉對應的元素位置）

    uni-app+ts----微信小程序錨點定位 、自動吸頂、滾動自動選擇對應的錨點（點擊tab跳轉對應的元素位置）

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

    2024年02月21日
    瀏覽(94)

  • 微信小程序內嵌h5頁面，實現動態(tài)設置頂部標題的功能

    一、需求描述 使用HBuilder X作為開發(fā)工具，vue作為開發(fā)語言，開發(fā)微信小程序。微信小程序頁面內嵌h5頁面，即web-view/web-view標簽。通過設置不同url連接地址，設置不同的標題。 二、失敗做法 頁面A嵌入h5頁面，需要給A設置標題。最開始寫法是在lonload頁面內，使用如下語句實現

    2024年02月04日
    瀏覽(150)
  • 微信小程序云開發(fā)之自定義頂部導航欄搜索框（非組件）

    微信小程序云開發(fā)之自定義頂部導航欄搜索框（非組件）

    提到微信小程序，就不得不提到它那磨人的頂部導航欄，真的有被丑到。身為強迫癥患者，筆者實在是難以忍受，好在官方提供了解決方案，但是對于初學者還是有一丟丟的難度，為了初學者不在重蹈筆者的老路，這篇文章就給大家分享一下如何做一個好看的自定義頂部導航

    2024年02月10日
    瀏覽(28)
  • uni-app微信小程序，在頁面頂部添加返回按鍵，返回上一個頁面

    uni-app微信小程序，在頁面頂部添加返回按鍵，返回上一個頁面

    1.示例： 2.實現方式： 在page.json文件中的style里添加如下代碼： 3.tips： 在page.json中的頁面順序就是小程序加載過程中的頁面順序

    2024年02月12日
    瀏覽(26)
  • 原聲微信小程序自定義頂部導航欄 . 自定義navigationBar。 (單頁面設置)

    原聲微信小程序自定義頂部導航欄 . 自定義navigationBar。 (單頁面設置)

    本文實例為大家分享了微信小程序自定義導航欄的具體代碼，供大家參考，具體內容如下 實現自定義大致需要以下?步驟: 1.在頁面.JSON文件進行相關配置,以便去掉原生 備注: ?navigationStyle（導航欄樣式），參數: default = 默認樣式，custom = 自定義樣式。? 2.在頁面.js文件onLoad生命

    2024年02月09日
    瀏覽(39)
  • uniapp使用Uview的Navbar自定義微信小程序頂部導航欄，滾動漸變透明效果；看完不會我下跪

    uniapp使用Uview的Navbar自定義微信小程序頂部導航欄，滾動漸變透明效果；看完不會我下跪

    2024年04月22日
    瀏覽(43)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領取紅包，優(yōu)惠每天領

二維碼1

領取紅包

二維碼2

領紅包