校内实训第八天

js文件

const app = getApp()

 

Page({

data: {

characteristicList: [{

text: "免配送费"

}, {

text: "0元起送"

}, {

text: "新商家"

}, {

text: "品牌商家"

}, {

text: "跨天预定"

}],

sortList: [{

sort: "综合排序",

image: "",

}, {

sort: "速度最快",

image: "",

}, {

sort: "评分最高",

image: "",

}, {

sort: "起送价最低",

image: "",

}, {

sort: "配送费最低",

image: "",

}],

discountList: [{

icon: "减",

iconColor: "#FF635B",

text: "满减优惠"

}, {

icon: "领",

iconColor: "#FF7298",

text: "进店领券"

}, {

icon: "返",

iconColor: "#FB4343",

text: "满返代金券"

}, {

icon: "折",

iconColor: "#C183E2",

text: "折扣商品"

}, {

icon: "订",

iconColor: "#6FDF64",

text: "提前下单优惠"

}, {

icon: "赠",

iconColor: "#FDC41E",

text: "满赠活动"

}, {

icon: "免",

iconColor: "#43B697",

text: "满免配送"

}],

categoryList: {

pageone: [{

name: "美食",

src: "/pages/images/1.png"

}, {

name: "甜点饮品",

src: "/pages/images/2.png"

}, {

name: "美团超市",

src: "/pages/images/3.png"

}, {

name: "正餐精选",

src: "/pages/images/4.png"

}, {

name: "生鲜果蔬",

src: "/pages/images/5.png"

}, {

name: "全部商家",

src: "/pages/images/6.png"

}, {

name: "免配送费",

src: "/pages/images/7.png"

}, {

name: "新商家",

src: "/pages/images/8.png"

}],

pagetwo: [{

name: "美食",

src: "/pages/images/1.png"

}, {

name: "甜点饮品",

src: "/pages/images/2.png"

}, {

name: "美团超市",

src: "/pages/images/3.png"

}, {

name: "正餐精选",

src: "/pages/images/4.png"

}, {

name: "生鲜果蔬",

src: "/pages/images/5.png"

}, {

name: "全部商家",

src: "/pages/images/6.png"

}, {

name: "免配送费",

src: "/pages/images/7.png"

}, {

name: "新商家",

src: "/pages/images/8.png"

}]

},

selected: 0,

mask1Hidden: true,

mask2Hidden: true,

animationData: "",

location: "",

characteristicSelected: [false, false, false, false, false, false, false],

discountSelected: null,

selectedNumb: 0,

sortSelected: "综合排序"

},

 

// 打开搜索页面

newpage:function(){

// 跳转到页面

wx.navigateTo({

url: '../scout/scout',

})

},

 

// 滚动监听

scrollTopfun:function(e){

this.setData({

top: e.detail.scrollTop

})

// console.log(e.detail.scrollTop);

},

 

onLoad: function () {

}

})

wxml文件

<!-- 滚动的区域 -->

<scroll-view bindscrolltolower="lower"

class="scroll-restaurants-list"

scroll-y="true"

style="height:100%">

 

<view class="heard">

<navigator url="/pages/location/location">

<view class="heard-location">

<image src="/pages/images/location.png"

class="heard-location-icon"/>

<text class="heard-location-text">广东海洋大学</text>

</view>

</navigator>

<view class="heard-search" bindtap="newpage">

<image src="/pages/images/search.png" class="heard-search-icon"/>

</view>

</view>

<swiper class="categoryList" indicator-dots="true"

indicator-color="rgba(228,228,228,1)"

indicator-active-color="#FECA49">

<block wx:for="{{categoryList}}" wx:key="">

<swiper-item>

<block wx:for="{{item}}" wx:key="">

<view class="category-info">

<image src="{{item.src}}"

class="category-image"></image>

<view class="category-text">{{item.name}}</view>

</view>

</block>

</swiper-item>

</block>

</swiper>

<view class="header-title">附近商家</view>

 

<!-- 综合排序 -->

<view class="sort {{top>=109? 'fixed1' :'' }}">

<view class="items">

<view class="item1">综合排序</view>

<view class="item2">销量高</view>

<view class="item2">速度快</view>

<view class="item2">减配送费</view>

<view class="item2">筛选</view>

</view>

></view>

</scroll-view>

wxss文件

/**index.wxss**/

page{

height: 100%;

}

.heard-location-text{

position: absolute;

overflow: hidden;

}

 

.characteristic-selected{

background: #FFFBF1;

border-color: #FFE9B7;

color: #FFE6B4;

}

.discount-selected{

color: #FFE6B4;

}

.heard{

justify-content: space-around;

display: flex;

width: 100%;

height: 80rpx;

background: #FFC640;

}

.heard-location-icon{

position: absolute;

top: 12rpx;

height: 25rpx;

width: 25rpx;

}

.heard-location-text{

left: 47rpx;

top: 9rpx;

height: 30rpx;

width: 190rpx;

white-space:nowrap;

text-overflow: ellipsis;

}

.heard-location{

position: relative;

font-size: 25rpx;

padding: 5rpx 15rpx;

margin: 10rpx;

width: 250rpx;

height: 40rpx;

background: #B38B2D;

color: white;

border-radius: 20rpx;

}

.heard-location:after{

content: '';

position: absolute;

top: 20rpx;

left: 250rpx;

width: 8rpx;

height: 8rpx;

border: 3rpx solid #fff;

border-bottom: none;

border-left: none;

transform: rotate(45deg);

}

.heard-search{

font-size: 25rpx;

padding: 5rpx 15rpx;

margin: 10rpx;

height: 40rpx;

width: 400rpx;

background: white;

border-radius:20rpx;

line-height: 40rpx;

}

.heard-search-icon{

height: 21rpx;

width: 21rpx;

}

.categoryList{

width: 100%;

height: 350rpx;

border-bottom:20rpx solid #f4f4f4;

}

.category-info{

display: inline-block;

text-align: center;

position: relative;

margin-top: 20rpx;

height: 150rpx;

width: 25%;

}

.category-image{

width: 95rpx;

height: 95rpx;

}

.category-text{

font-size: 25rpx;

width: 100%;

line-height: 30rpx

}

.header-title{

text-align: center;

width: 100%;

height: 80rpx;

line-height: 80rpx;

font-size: 31rpx;

font-weight: 600;

}

.sort-list{

justify-content: space-around;

display: flex;

background: white;

width: 100%;

height: 80rpx;

font-size: 27rpx;

color: #6A6A6A;

align-content: center;

border: 1rpx solid #ECECEC;

}

.sort{

text-align: center;

margin: auto 0;

height: 30rpx;

line-height: 30rpx;

border-right: 1rpx solid #ECECEC;

flex: 1;

}

.sort-active{

color: black;

font-weight: 800;

}

.restaurants-list{

font-size: 25rpx;

display: flex;

width: 100%;

padding: 10rpx 0;

border-bottom: 1rpx solid #ECECEC;

color: #6D6D6D;

justify-content: space-between;

}

.restaurants-info-name{

color: black;

font-size: 30rpx;

margin-bottom: 10rpx;

}

.restaurants-image{

width: 200rpx;

height: 125rpx;

margin: 20rpx;

}

.restaurants-info{

margin: 15rpx;

flex: 1;

}

.restaurants-distribution{

display: flex;

width: 100rpx;

margin-right:20rpx;

}

.restaurants-info-rating{

display: flex;

width: 300rpx;

height: 50rpx;

line-height: 50rpx;

}

.restaurants-info-rating-stars{

color: #FFD161;

width: 130rpx;

height: 50rpx;

}

.restaurants-info-rating-sales{

width: 150rpx;

height: 50rpx;

}

.restaurants-distribution{

flex-direction: column;

text-align: right;

justify-content: center;

}

.mask{

width:100%;

height:100%;

position: fixed;

z-index:999;

background-color:rgba(15, 15, 26, 0.7);

}

.sort{

display:flex;

background-color: white;

padding: 20rpx 0;

padding-left: 20rpx;

}

.fixed1{

width: 100%;

position: fixed;

top: 109rpx;

}

.sort>.items{

display: flex;

align-items: flex-start;

}

.sort>.items>.item1{

margin-bottom: 20rpx;

font-size: 28rpx;

color: #666;

}

.sort>.items>.item2{

margin-left: 20rpx;

margin-bottom: 20rpx;

font-size: 28rpx;

color: #666;

}