低仿美团外小程序
重要代码:
index.js
const app = getApp()
Page({
data: {
top: '',
show: "综合排序",
flag: false,
arr: ["综合排序", "距离最近", "评分最高", "起送价最低"]
},
// 模态框
showtext: function (e) {
console.log(e.target.dataset.key);
this.setData({
show: this.data.arr[e.target.dataset.key],
flag: false
})
},
// 点击综合排序
click: function () {
this.setData({
top: 112,
flag: true
})
},
// 打开搜索页面
newpage: function () {
// 跳转到页面
wx.navigateTo({
url: '../scout/scout',
})
},
// 滚动监听
scrollTopfun: function (e) {
this.setData({
top: e.detail.scrollTop
})
// console.log(e.detail.scrollTop);
},
onLoad: function () {
}
})
index.wxml
<!-- 滚动的区域 -->
<scroll-view style='height:100%;' scroll-y="true" bindscroll="scrollTopfun">
<!-- location -->
<view class='loc'>
<image src="../../icons/location.png" style="width:30rpx;height:30rpx;"></image>
<text>广东海洋大学 ></text>
</view>
<!-- 搜索 -->
<view class="scout {{top>=20? 'fixed' :'' }}" bindtap="newpage">
<image class='img' src='../../icons/icon.png'></image>
<input class='ipt' placeholder='请输入商家或商品名称' placeholder-class='place' disabled="true"></input>
</view>
<!-- swiper -->
<swiper indicator-dots="true">
<swiper-item class="items">
<image class='imggg' src='../../images/1.jpg'></image>
</swiper-item>
<swiper-item >
<image class='imggg' src='../../images/2.jpg'></image>
</swiper-item>
</swiper>
<!-- navbar -->
<view class="navbar {{top>= 112 ? 'navfixed' :'' }}">
<view bindtap='click'>
{{show}}
<view class='sj'></view>
</view>
<view>销量高</view>
<view>速度快</view>
<view>减配送费</view>
<view>筛选</view>
<!-- <image class='imgg' src='../../images/3.jpg'></image> -->
<!-- select -->
<view class='select' wx:if="{{flag}}">
<!-- option -->
<view wx:for="{{arr}}" bindtap='showtext' wx:key="{{index}}" data-key="{{index}}">{{item}}</view>
</view>
</view>
<image class='imgg' src='../../images/3.jpg'></image>
</scroll-view>
index.wxss
/**index.wxss**/
page{
height: 100%;
}
/* 定位区域 */
.loc{
display: flex;
align-items: center;
padding: 0 20rpx;
}
.loc>text{
margin-left: 10rpx;
color: #999;
font-size: 28rpx;
}
/* 搜索 */
.scout{
background-color: #fff;
display:flex;justify-content:center;
align-items: center;
padding: 20rpx 0;
position: relative;
}
.scout>.img{
width: 40rpx;
height: 40rpx;
position: absolute;
left: 22rpx;
}
.scout>.ipt{
width:90%;
background-color:#f0f5f8;
border-radius:15rpx;
padding: 8rpx 0rpx;
padding-left: 50rpx;
}
.swiper{
display: block;
height: 155px;
}
.img{
height: 91%;
margin-left: -5rpx;
}
.imggg{
height: 100%;
width: 100%;
}
.imgg{
height: 120%;
width: 100%;
}
.place{
font-size: 28rpx;
}
.fixed{
width: 100%;
position: fixed;
top: 0;
z-index: 99;
}
.navfixed{
width: 100%;
position: fixed;
top: 108rpx;
z-index: 99;
}
.navbar{
display: flex;
justify-content: space-around;
height: 6%;
align-items: center;
color: rgb(88, 86, 86);
}
.navbar>view{
font-size: 28rpx;
}
.navbar>view:first-child{
display: flex;
align-items: center;
position: relative;
}
.navbar .sj{
width: 0;
height: 0;
border: 10rpx solid transparent;
border-top-color:#000;
position: absolute;
top: 50%;
transform: translateY(-5rpx);
right:-20rpx;
}
.select{
width: 100%;
position: fixed;
top: 145rpx;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,.3)
}
.select>view{
padding: 20rpx 30rpx;
background-color: #fff;
border-bottom: 1rpx solid #ddd;
}
首页效果图: