实训 Day09 实习日志

最新推荐文章于 2019-12-06 13:46:17 发布

忘记了的小码农

最新推荐文章于 2019-12-06 13:46:17 发布

阅读量293

点赞数 1

CC 4.0 BY-SA版权

分类专栏：第一次校内实训文章标签：仿美团外卖

本文链接：https://blog.youkuaiyun.com/x1432553805/article/details/93925359

第一次校内实训专栏收录该内容

10 篇文章

订阅专栏

在今天的实训中，深入学习了电商项目美团外卖微信小程序的主页设计，实现了内容区域的矩形边框与无内容区域的三角形边框效果，以及下拉列表等功能。通过复杂的view嵌套成功布局页面，代码包括index.wxml, index.wxss和index.js。" 45770077,3107567,Python单元测试框架unittest详解,"['python', 'unittest', '测试框架', '编程', '软件测试']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天学习了电商项目——美团外卖微信小程序的主页页面的布局以及部分功能实现。了解到有内容的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: '最具人气的小程序开发联盟!'
    }
  }
})