实训日志day8~9 ——6.26~6.27

最新推荐文章于 2020-10-08 15:48:17 发布

朴朴叫老高

最新推荐文章于 2020-10-08 15:48:17 发布

阅读量228

点赞数 1

本文链接：https://blog.csdn.net/weixin_42476217/article/details/93887223

版权

今天和昨天是开始模拟美团订餐的小程序

我昨天的没有完成好直接实训第九天开始接着完善

1.在里面添加了图片左右切换美化

2.添加了美团里面的图标

3.综合排序栏的下拉框完善

wxml文件

<scroll-view style='height:100%;' scroll-y="true" bindscroll="scrollTopfun" scroll-top="{{top}}">


<view class='locat'>
<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>

<view class="container">
<view class="top">
<swiper class="top-swiper" indicator-dots="{{indicatorDots}}" circular="true"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image mode="widthFix" src="{{item}}"/>
</swiper-item>
</block>
</swiper>
<swiper class="middle-swiper" indicator-dots="true" autoplay="" interval="" duration="500">
<swiper-item wx:for="{{icons}}" wx:for-item="list">
<view class='icon' wx:for="{{list}}" wx:for-item="item">
<image src="{{item.img}}"></image>
<text>{{item.name}}</text>
</view>
</swiper-item>
</swiper>

<view >附近商家</view>

<view class="navbar {{top>= 112 ? 'navfixed' :'' }}">
<view bindtap='click'>
{{show}}
<view class='sj'></view>
</view>
<view>销量高</view>
<view>速度快</view>
<view>减配送费</view>
<view>筛选</view>

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

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

<view class="loading">努力加载中…</view>

</view>
</view>
</scroll-view>

wxss文件

/**index.wxss**/
page{
height: 100%;
}

/* 定位区域 */
.locat{
display: flex;
align-items: center;
padding: 0 20rpx;
}

.locat>text{
margin-left: 10rpx;
color: #999;
font-size: 28rpx;
}

/* 搜索 */
.scout{
background-color: #fff;
display:flex;
justify-content:center;
align-items: center;
padding: 20rpx 0 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;
}
.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;
top: 108rpx;
background-color: #fff;
}

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

/* delete */
.li{
position: relative;
}
.li>.del{
position: absolute;
right: -30px;
top: 0;
}

.container{
padding: 0 0;
height: 100%;

}
.top{
width: 100%;
height:120%;
display: flex;
flex-direction: column;
}
.top-swidder{
width: 100%;
height:100%;
}
image{
width: inherit;
}

.icon text{
display: block;
font-size: 0.6rem;
}
.icon{
display: inline-flex;
flex-direction: column;
width: 25%;
height:40%;
align-items: center; /*子内容居中*/
}
.icon image{
width: 3rem;
height:3rem;
display: block;
}
.middle-swiper{
height:10rem;
margin: 15rpx 0;
}
swiper {
display:block;
height:35%;
}
.middle-swiper {
height:8.5rem;
margin:10rpx 0 0;