校内实习第九天

作业详情：链接：https://pan.baidu.com/s/1ywVzktf7KRNAoz7aA5Bcvw 
提取码：sp6i 

微信小程序电商项目业务功能实现：对相关的一些功能进行了实现，对“外卖”小程序中的综合排序的下拉功能进行实现，以及部分内容下拉到一点位置的时候固定再页面的顶部，紧跟着搜索框。收获和体会：综合排序的下拉功能“三角形”的实现的方式以及美食框下的贴图及信息的布局，加深了对页面布局的操作熟悉度。

综合排序的下拉功能“三角形”的实现

.wxml文件：

<!-- 导航条-->

<view class="navbar {{top>= 112 ? 'navfixed' :'' }}">

<view bindtap='click'>

{{show}}

<view class='sj'></view>

</view>

<view>销量高</view>

<view>速度快</view>

<view>减配送费</view>

<view>筛选</view>

 

<!-- select -->

<view class='select' wx:if="{{flag}}">

<!-- option -->

<view wx:for="{{array}}" bindtap='showtext' wx:key="{{index}}" data-key="{{index}}">{{item}}</view>

</view>

</view>

.js文件：

Page({

data: {

top:'',

show:"综合排序",

flag:false,

array:["综合排序","距离最近","评分最高","起送价最低","配送费最低","人均高到低","人均低到高"]

},

// 模态框

showtext: function (e) {

console.log(e.target.dataset.key);

this.setData({

show: this.data.array[e.target.dataset.key],

flag: false

})

},

// 点击综合排序

click: function () {

this.setData({

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 () {

}

})

.wxss文件：

/* 筛选框 */

.navfixed{

width: 100%;

position: fixed;

top: 80rpx;

z-index: 99;

}

 

.navbar{

display: flex;

justify-content: space-around;

background-color: #fff;

}

.navbar>view{

font-size: 30rpx;

padding: 20rpx 20rpx;

}

.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;

}

结果：

美食框的实现与其样式

<view>

<image style="height:150rpx;width:150rpx" src="../../icons/1.jpg"></image>

<view class='footText'>

<text style="font-weight:bold;font-size: 30rpx;">碉堡汉堡店</text>

<view><image style="height:15rpx;width:110rpx" src="../../icons/4.3.jpg"></image><text>月售4575单</text></view>

<view class='tText'><text>起送价¥15 |</text><text> 免配送费 |</text><text> 人均¥17</text></view>

<view style="display:flex;align-items:center;"><image style="height:30rpx;width:30rpx;" src="../../icons/home.png"></image><text>汉堡薯条</text></view>

<view class='box'><text>首单减12</text><text>支持自取</text></view>

</view>

<view class='dist'><text>1.97km | 40分钟</text></view>

</view>

/* 外卖 */

.food{

margin-bottom: 30rpx;

margin-left: 20rpx;

}

.food>view{

width:100%;

display:flex;

justify-content: flex-start;

line-height: 40rpx;

margin-bottom: 20rpx;

}

.footText{

font-size: 20rpx;

padding-left: 20rpx;

display:flex;

flex-direction: column;

}

.dist{

width:35%;

font-size:20rpx;

display:flex;

justify-content: flex-end;

padding-top: 42rpx;

}

.tText{

padding-right: 15rpx;

}

.box{

padding-right: 20rpx;

}

.box>text{

border-radius:15rpx;

box-sizing: border-box;

margin-right: 20rpx;

border-right: 1rpx solid #ddd;

border-bottom: 1rpx solid #ddd;

border-left: 1rpx solid #ddd;

border-top: 1rpx solid #ddd;

}