201711671226 信管1172 实训总结八

外卖界面截图

 

部分wxml代码

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

<view class='locat'>
<image src="../../icons/location.png" style="width:40rpx;height:40rpx;"></image>
<text>广东海洋大学></text>
</view> 

<view class="scout {{top>=20? 'fixed':''}}"  bindTap>
<image class='img' src='../../icons/icon.png'></image><input class='ipt' placeholder='请输入商品或商家名称' placeholder-class='place'></input></view>
<view class='wan'>
<view>华莱士</view>
<view>麦德旺</view>
<view>烧蚝帮</view>
<view>炸豆腐</view>
<view>蛙小侠</view>
<view>麦当劳</view>
<view>柳源螺狮粉</view>
<view>佳味桂林米粉</view>
<view>小郡肝串串香</view>
<view>传奇冒菜</view>
<view>麻辣香锅</view>
<view>灌汤包</view>
<view>千里香馄饨铺</view>
<view>五谷鱼粉</view>
<view>石锅鱼</view>
<view>炸鸡</view>
<view>麻辣烫</view>
<view>好食粥坊</view>
<view>饺子</view>
<view>包子铺</view>
<view>拉粉</view>
<view>好食粥坊</view>
<view>食粥坊</view>
</view>
</scroll-view>

 

学习总结

今天微信小程序开发专注于实现新的项目，做出类似美团的外卖界面，并能实现界面跳转功能，微信小程序都是源自于生活的需求，在外卖这个环节自然要制作面向客户的小程序，从中我也发现到了不一样的布局界面对于用户的体验是完全不一样的，所以需要我们根据需求，排版，功能的完善，才能对小程序制作把握得当。