实训 Day09 实习日志

今天学习了电商项目——美团外卖微信小程序的主页页面的布局以及部分功能实现。了解到有内容的view的边框为矩形，没内容的边框为三角形；下拉列表；页面中的一些布局我也不知道自己是怎么想出来的，各种view的嵌套，最后还是做出来了，页面的布局基本上没有问题，我的页面如下

具体代码如下：

index.wxml:

<!-- 滚动的区域 -->
<scroll-view style='height:100%;' scroll-y="true" bindscroll="scrollTopfun"><!-- location --><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><!-- swiper -->
<!-- <swiper indicator-dots="true"><swiper-item class="items" style="background:pink"></swiper-item><swiper-item style="background:rgba(0,0,255,.3)"></swiper-item>
</swiper> --><!-- 菜单列表 -->
<view class='menu'>
<view><view class='idots'><image src="../../icons/meishi.gif"></image></view><view>美食</view>
</view>
<view><view class='idots'><image src="../../icons/yinping.gif"></image></view><view>甜点饮品</view>
</view>
<view><view class='idots'><image src="../../icons/chaoshi.gif"></image></view><view>超市便利</view>
</view>
<view><view class='idots'><image src="../../icons/shengxian.gif"></image></view><view>蔬菜水果</view>
</view>
<view><view class='idots'><image src="../../icons/xianhua.gif"></image></view><view>浪漫鲜花</view>
</view>
<view><view class='idots'><image src="../../icons/zaocan.gif"></image></view><view>宵夜</view>
</view>
<view><view class='idots'><image src="../../icons/jianmian.gif"></image></view><view>减免配送费</view>
</view>
<view><view class='idots'><image src="../../icons/jiachang.gif"></image></view><view>家常菜</view>
</view>
<view><view class='idots'><image src="../../icons/nuanwei.gif"></image></view><view>甜蜜蛋糕</view>
</view>
<view><view class='idots'><image src="../../icons/all.png"></image></view><view>全部分类</view>
</view>
</view><!-- 广告位 -->
<swiper circular='true' autoplay='true' style='height:300rpx;'>
<block wx:for="{{imgurl}}" wx:key="{{index}}"><swiper-item ><image src='{{item.url}}' class='sw_ige'></image></swiper-item></block>
</swiper><view class='around'><text>附近商家</text></view><!-- 综合排序 -->
<view class="multiple {{top>=262? 'fixed_two' : '' }}">
<view class='mul_l'>
<view bindtap='click'>{{show}}
<view class='sj'></view>
</view>
<view>销量高</view>
<view>速度快</view>
<view>减配送费</view>
</view>
<view class='mul_r'><text>筛选</text><image src='../../icons/shaixuan.png'></image></view>
</view><!-- select --><view class='select' wx:if="{{flag}}"><!-- option --><view wx:for="{{arr}}" bindtap='showtext' wx:key="{{index}}" data-key="{{index}}">{{item}}</view></view> <view style='width:100%;height:250rpx;overflow:hidden;'><image src='../../icons/shop1.png' style='width:100%;height:250rpx;'></image></view>
<view style='width:100%;height:250rpx;overflow:hidden;'><image src='../../icons/shop2.png' style='width:100%;height:250rpx;'></image></view>
<view style='width:100%;height:250rpx;overflow:hidden;'><image src='../../icons/shop3.png' style='width:100%;height:250rpx;'></image></view></scroll-view>

index.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;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;
}
.fixed_two{width: 100%;position: fixed;top: 94rpx;z-index: 99;
}
.multiple{display: flex;justify-content: space-between;color: #666;/* margin: 10rpx 0; */font-size: 28rpx;background-color: white;box-sizing:  border-box;
}
.multiple>view:last-child{margin-right: 20rpx;
}
.multiple>view{display: flex;justify-content: flex-start;font-size: 28rpx;
}
.multiple>.mul_l>view{margin: 0 22rpx;
}
.multiple>.mul_r{margin-right: 50rpx;width: 100rpx;height: 30rpx;
}
.multiple>.mul_r>image{padding-top: 6rpx;width: 30rpx;height: 30rpx;
}
.multiple>.mul_l>view:first-child{display: flex;align-items: center;position: relative;
}
.multiple>.mul_l .sj{width: 0;height: 0;border: 10rpx solid transparent;border-top-color:#000;position: absolute;top: 50%;transform: translateY(-3rpx);right:-22rpx;
}
.around{height: 60rpx;margin: 20rpx 0 16rpx 16rpx;
}
.around>text{font-size: 40rpx;font-weight: bold;
}
.menu{display: flex;justify-content: flex-start;flex-wrap: wrap;
}
.menu>view{display: flex;height: 130rpx;width: 130rpx;font-size: 26rpx;flex-direction: column;align-items: center;margin: 10rpx;
}
.menu>view>.idots{display: flex;overflow: hidden;height: 90rpx;width: 90rpx;border-radius: 50%;/* background-color:red; */justify-content: center;margin-bottom: 10rpx;
}
.menu>view>view:last-child{font-size: 22rpx;color: #666;
}
.menu>view>.idots>image{height: 90rpx;width: 90rpx;
}
.sw_ige{width:95%;height:300rpx;margin: 20rpx;box-sizing: border-box;
}.select{width: 100%;position: fixed;top: 122rpx;bottom: 0;left: 0;background-color: rgba(0,0,0,.3)
}
.select>view{padding: 20rpx 30rpx;background-color: #fff;border-bottom: 1rpx solid #ddd;font-size: 28rpx;
}

index.js:

//index.js
//获取应用实例
const app = getApp()Page({data: {top:'',show:"综合排序",flag:false,arr: ["综合排序", "距离最近", "评分最高", "起送价最低", "配送费最低", "人均高到低", "人均低到高"],imgurl: [{url: "../../icons/wenjuan.png"}, {url: "../../icons/fanli.png"}]},// 打开搜索页面newpage:function(){// 跳转到页面wx.navigateTo({url: '../scout/scout',})},// 点击综合排序click: function () {this.setData({top: 262,flag: true})},// 模态框showtext: function (e) {console.log(e.target.dataset.key);this.setData({show: this.data.arr[e.target.dataset.key],flag: false})},// 滚动监听
scrollTopfun:function(e){this.setData({top: e.detail.scrollTop})//console.log(e.detail.scrollTop);},onLoad: function () {},onShareAppMessage: function () {return {title: '微信小程序联盟',desc: '最具人气的小程序开发联盟!'}}
})

实训 Day09 实习日志相关推荐

软件工程实训报告需求文档测试文档,《软件工程实训》实习报告模板
<软件工程实训>实习报告模板计算机与信息管理专业软件工程课程设计题目:图书信息管理专业:计算机与信息管理班级: 学号: 姓名: 2008年12月15 日一.实习目的与要求由x ...
c语言鸡兔同笼的实训报告的目的,车床实训报告实习目的
车床实训报告实习目的是参加实习的同学需要明确的,以下是车床实训报告实习目的示例,以供赏析和参考借鉴! 车床实训报告实习目的[1] 1.学会在工作中运用课本知识,体验做一个社会人的责任和义务. 2.在顶 ...
蓝盾实训营day6——日志查看和木马清除
开启服务器日志 apache-php开启日志方法木马捆绑木马清除环境查看可疑进程解决镜像劫持(程序唤醒) 解决开机自启彻底清除木马文件开启服务器日志根据应用服务器的不同,有不同的日志开 ...
山东大学创新项目实训个人工作日志（二十三）
景点图片爬取(改进) 经过测试发现,之前爬到的数据并不是全部的数据,据估计,全国共两千多个城市和地区,数以万计的景点,而之前仅仅是将每个城市的一小部分景点爬了出来,所以现在需要做的就是把所有数据全部爬 ...
山东大学创新项目实训个人工作日志（一）
目录一.百度地图API的接入二.主要实现的功能查询景点计算距离半正矢公式一.百度地图API的接入百度地图API可以为我们提供多种关于地图绘制和计算的功能,因为我们的项目和出行旅游有着很大 ...
创新实训个人工作日志（四）
文章目录 1. 本周工作内容 2. 工作成果展示 3. uniLM实现源码解读 3.1 cmrcData.py 3.2 run_seq2seq.py 3.3 modeling_unilm.py 3.4 ...
山东大学创新项目实训个人工作日志（十六）
景点门票数据的整合至此为止,共爬取了八个平台上门票信息,但信息参差不齐,如果直接这样返回给用户肯定是不可以的,所以现在需要做的就是把八个平台上想要爬取的数据规定一个固定的格式,我这里采用的依然是字典 ...
山东大学创新项目实训个人工作日志（十七）
景点门票数据的整合和组织主要实现的是景点门票的后四个平台(去哪儿.同程.途牛.携程)的数据的整合. 去哪儿: def search_spots(self, keyword, city):'''查询景 ...
山东大学创新项目实训个人工作日志（二十）
马蜂窝平台的景点图片爬取这次完成的是对马蜂窝景点图片爬取的改进,之前是通过地图点来爬取的,但是地图点的数据不全,所以研究之后打算从这一板块重新爬取. 但是这一部分进行翻页时,网页本身是没有任何变化的 ...

实训 Day09 实习日志

实训 Day09 实习日志相关推荐

最新文章

热门文章