微信小程序外卖商家展示首页样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<import src="../template/template" />
<view class="container">
  <!--顶部搜索栏-->
  <view class="search">
    <!--当前位置-->
    <view bindtap="chooseLocation" class="search-site triangle">{{ userSite }}</view>
    <view bindtap="goSearch" class="search-in iconfont icon-sousuo_sousuo">搜索餐厅、 菜系、 商圈</view>
  </view>
  <!--carousel-->
  <template is="carousel" data="{{ imgUrls }}"></template>
  <!--nav-->
  <view class="nav">
    <navigator url="../showShop/showShop?type={{ index }}" hover-class="none" class="{{ item.navIcon }}" wx:for="{{ navList }}" wx:key="unique">
      {{ item.navTitle }}
    </navigator>
  </view>
  <!--hot-shop-->
  <view class="hot-shop">
    <view class="slide">热门商家</view>
    <view class="hot-shop-wrap">
      <navigator url="../detail/detail?kind={{ index }}" hover-class="none" class="hot-shop-content" wx:for="{{ hotShop }}" wx:key="unique">
        <image class="hot-shop-img" src="{{ item.shopImg }}"></image>
        {{ item.shopName }}
      </navigator>
    </view>
  </view>
  <!--near-shop-->
  <view class="near-shop">
    <view class="slide ">附近商家</view>
    <view class="near-shop-wrap">
      <navigator url="../ordering/ordering?shopId={{ item.id }}" hover-class="none" class="near-shop-content" wx:for="{{ nearShop }}" wx:key="unique">
        <image class="near-shop-img" src="{{ item.img }}"></image>
        <view class="near-shop-detail">
          <veiw class="n-s-c-name">{{ item.name }}</veiw>
          <view class="n-s-c-price {{ item.grade }} iconfont icon-wuxing"> ￥{{ item.price }}/人</view>
          <view class="n-s-c-kind">{{ item.kind }}  {{ item.distance }}</view>
          <view class="n-s-c-status">
            <text class="n-s-c-s-left">排队</text>
            <text class="n-s-c-s-center">当前排队状况</text>
            <text class="n-s-c-s-right">{{ item.status }}</text>
          </view>
        </view>
      </navigator>
    </view>
  </view>
</view>

二、wxss样式文件代码如下：

.search {
  display: flex;
  align-items: center;
  padding: 20rpx;
  height: 90rpx;
  box-sizing: border-box;
}
.search .search-site {
  font-size: 26rpx;
  padding-right: 40rpx;
  line-height: 50rpx;
  color: #ed4d30;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 200rpx;
}
.search .search-site::after {
  right: -25rpx;
  border-color: #ed4d30;
  transform: translateY(-75%) rotateZ(135deg);
}
.search .search-in {
  flex: 1;
  line-height: 53rpx;
  border: 1rpx solid #eee;
  border-radius: 15rpx;
  font-size: 24rpx;
  padding-left: 48rpx;
  box-sizing: border-box;
  position: relative;
  font-weight: 600;
}
.search .search-in::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(50%, -50%);
}
.nav {
  display: flex;
  justify-content: space-around;
  padding-bottom: 10rpx;
  border-bottom: 11rpx solid #eee;
}
.nav .iconfont {
  position: relative;
  margin-top: 130rpx;
  font-size: 30rpx;
}
.nav .iconfont::before {
  font-size: 80rpx;
  position: absolute;
  top: -270%;
  left: 15%;
}
.nav .iconfont:nth-child(1)::before {
  color: #f95845;
}
.nav .iconfont:nth-child(2)::before {
  color: #4cbafa;
}
.nav .iconfont:nth-child(3)::before {
  color: #fcdb1b;
}
.hot-shop {
  border-bottom: 11rpx solid #eee;
}
.hot-shop-wrap {
  display: flex;
  flex-wrap: wrap;
}
.hot-shop-wrap .hot-shop-content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  font-size: 26rpx;
  width: 250rpx;
  height: 250rpx;
  border: 1rpx solid #eee;
  border-left: none;
  margin-top: -1rpx;
}
.hot-shop-wrap .hot-shop-content .hot-shop-img {
  width: 172rpx;
  height: 129rpx;
}

三、js页面代码如下：

'use strict';

// 获取全局应用程序实例对象
var app = getApp();

// 创建页面实例对象
Page({
  /**
   * 页面的初始数据
   */
  data: {
    title: 'index',
    userInfo: null,
    userSite: '定位中',
    navList: [{
      navTitle: '排队取号',
      navIcon: 'iconfont icon-shalou'
    }, {
      navTitle: '预约订座',
      navIcon: 'iconfont icon-chuliyuyue'
    }, {
      navTitle: '扫描单号',
      navIcon: 'iconfont icon-erweima'
    }],
    hotShop: [{
      shopImg: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      shopName: '青花椒砂锅鱼'
    }, {
      shopImg: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      shopName: '青花椒砂锅鱼'
    }, {
      shopImg: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      shopName: '青花椒砂锅鱼'
    }, {
      shopImg: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      shopName: '青花椒砂锅鱼'
    }, {
      shopImg: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      shopName: '青花椒砂锅鱼'
    }, {
      shopImg: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      shopName: '青花椒砂锅鱼'
    }],
    nearShop: [{
      img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      name: '青花椒砂锅鱼',
      price: '30',
      kind: '中国菜',
      distance: '8.6km',
      status: '无需排队',
      grade: 'five-star'
    }, {
      img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      name: '青花椒砂锅鱼',
      price: '30',
      kind: '中国菜',
      status: '无需排队',
      grade: 'four-star'
    }, {
      img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      name: '青花椒砂锅鱼',
      price: '128',
      kind: '中国菜',
      status: '无需排队',
      grade: 'one-star'
    }],
    imgUrls: ['http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg']
  },
  /**
   * 用户选择位置
   * @returns {boolean}
   */
  chooseLocation: function chooseLocation() {
    // console.log(1)
    var that = this;
    wx.chooseLocation({
      success: function success(res) {
        console.log(res);
        if (res.name.length <= 0) {
          return that.setData({
            userSite: res.address
          });
        }
        that.setData({
          userSite: res.name
        });
      }
    });
  },

  /**
   * 用户搜索
   */
  goSearch: function goSearch() {
    wx.navigateTo({
      url: '../search/search'
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function onLoad() {
    var _this = this;

    wx.getLocation({
      success: function success(res) {
        console.log(res);
      }
    });
    console.log(' ---------- onLoad ----------');
    // console.dir(app.data)
    app.getUserInfo().then(function (info) {
      return _this.setData({ userInfo: info });
    }).catch(console.info);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function onReady() {
    console.log(' ---------- onReady ----------');
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function onShow() {
    console.log(' ---------- onShow ----------');
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function onHide() {
    console.log(' ---------- onHide ----------');
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function onUnload() {
    console.log(' ---------- onUnload ----------');
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function onPullDownRefresh() {
    console.log(' ---------- onPullDownRefresh ----------');
  }
});
//# sourceMappingURL=index.js.map

模板简介：该模板名称为【微信小程序外卖商家展示首页样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。