微信小程序 顶部搜索 吸顶 不随页面滚动而滚动
微信小程序 商城：
主要用于商城类小程序：
微信小程序 搜索框 顶部吸顶 顶部购物车栏固定 不随页面滚动而滚动
示例:
结构分析
可以看到分为三部分--头部搜索框--中间商品区域(可滚动)----底部购物车(固定底部)
- 头部搜索框
最大的盒子宽高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
}
],