微信小程序美容美甲商城首页设计制作开发教程

本文给大家带来的是微信小程序美容美甲商城首页设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<!--index.wxml-->
<!--<loading hidden="{{!loading}}">
	{{title}}
</loading>-->
<view class="container">
<scroll-view  scroll-y="true"  class="page-body" bindscrolltolower="loadMore">
  <!--banner-->
  <view class="swiper">
      <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
              autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
          <block wx:for-items="{{banner_url}}" wx:key="item.id">
              <swiper-item>
                <block wx:if="{{item}}">
                  <image src="{{item}}"  mode="aspectFill"/>
                </block>
                <block wx:else>
                  <image src="../../images/default_pic.png" mode="aspectFill"></image>
                </block>
              </swiper-item>
          </block>
      </swiper>
  </view>
  <!--nav-->
  <view class="nav_top">
    <block wx:for="{{navTopItems}}" wx:key="item.id">
      <view class="nav_top_items {{curNavId == item.id ? 'active_'+colors[index] : ''}}" bindtap="switchTab" data-index="{{index}}" data-id="{{item.id}}">
        <image src="{{item.icon}}" mode="aspectFill"></image>
        <text>{{item.title}}</text>
      </view>
    </block>
  </view>
  <!--list-->
  <view class="nav_section">
    <view wx:if="{{list[curIndex]}}">
        <block wx:for="{{list[curIndex]}}" wx:key="item.id">
            <view class="nav_section_items" >
                <!--image-->
                <view class="section_image" bindtap="navigateDetail" data-aid="{{item.id}}">
                <block wx:if="{{item.coverpath}}">
                    <image src="{{item.coverpath}}" mode="aspectFill"></image>
                </block>
                <block wx:else>
                    <image src="../../images/default_pic.png" mode="aspectFill"></image>
                </block>
                </view>
                <!--content-->
                <view class="section_cont" bindtap="navigateDetail" data-aid="{{item.id}}">
                    <view class="section_cont_sub">
                        <text>{{item.subject}}</text>
                    </view>
                    <view class="section_cont_price">价格：{{item.price}}</view>
                    <view>{{item.message}}</view>
                </view>
                <!--book-->
                <view class="section_book" bindtap="bookTap" data-aid="{{item.id}}">
                        <text>预约</text>
                </view>
            </view>
            
        </block>
    </view>
    
    <view wx:else>暂无数据</view>

</view>

</scroll-view>
</view>

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

/**index.wxss**/
/* 轮播图 */
.swiper{
    width:100%;
    margin:0rpx;
}
.swiper image{
    display: inline;
}
/* 搜索 */
.search{
    width:100%;
    height:90rpx;
    background:#efeff4;
    border-bottom:2rpx solid #ddd;
    font-size:28rpx;
    padding-top:25rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.search_input{
    width:610rpx;
    height:64rpx;
    border:1rpx solid #ddd;
    border-radius:12rpx;
    display: flex;
    flex-direction: row;
    justify-content: start;
    background: #ffffff;
    margin-left:10rpx;
    padding:0rpx 10rpx;
    box-sizing:border-box;
}
.search_input .arrow_down_icon{
    width:24rpx;
    height:14rpx;
    margin: 26rpx 10rpx;
}
.search_input .search_icon{
    width:34rpx;
    height:34rpx;
    margin: 15rpx 10rpx 15rpx 20rpx;
}
.search_input .search_icon image,
.search_input .arrow_down_icon image{
    width:100%;
    height: 100%;
    display: block;
}
.search_input input{
    width:470rpx;
    height:64rpx;
    line-height: 64rpx;
    padding:4rpx 20rpx;
    font-size:28rpx;
    font-family:'微软雅黑';
    box-sizing:border-box;
    color:#a9a9a9;
}
.search_input picker{
    height:64rpx;
    line-height: 64rpx;
    text-align: center;
    color:#585858;
    margin-left:6rpx;
}
.search .search_btn{
    margin-top:14rpx;
    color:#38b337;
    font-size:32rpx;
    margin-right:10rpx;
}
/* 导航条 */
.nav_top{
    display:flex;
    flex-direction: row;
    justify-content: space-around;
    width:100%;
    box-sizing: border-box;
    padding:20rpx 10rpx;
    background:url(../../images/black_line.png) repeat;
    color:#fff;
}
.nav_top_items{
    text-align: center;
    font-size:28rpx;
    width:100rpx;
    border-radius:8rpx;
    box-sizing:border-box;
}
.nav_top_items image{
    width:83rpx;
    height:93rpx;
    display: inline-block;
}
.nav_top .active{
    color:#38b337;
}
.active_red{
    color:#e5004f;
}
.active_orange{
    color:#eb6100;
}
.active_yellow{
    color:#fff100;
}
.active_green{
    color:#8fc31f;
}
.active_purple{
    color:#aa2adf;
}


/* 导航对应内容项 */
.nav_section{
    width:100%;
}
.nav_section_items{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    padding:30rpx;
    border-bottom:2rpx solid #ddd;
    position: relative;
}
.nav_section_items:active{
    background:#ddd;
}
.nav_section_items .section_image{
    width:170rpx;
    height:158rpx;
}
.nav_section_items .section_image image{
    width:100%;
    height:100%;
}
.nav_section_items .section_cont{
    width:400rpx;
    font-size:26rpx;
    color:#a9a9a9;
    
}
.nav_section_items .section_cont view{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
    display: block;
}
.nav_section_items .section_cont .section_cont_intro{
    white-space:normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.nav_section_items .section_cont .section_cont_sub{
    font-size: 30rpx;
    line-height:60rpx;
    color:#000;
    margin-bottom:10rpx;
}
.nav_section_items .section_cont .section_cont_price{
    font-size:32rpx;
    color:#d24a58;
}
.nav_section_items .section_book{
    width:80rpx;
    height:80rpx;
    font-size:26rpx;
    border-radius:100%;
    background:#d24a58;
    line-height: 80rpx;
    color:#fff;
    text-align: center;
    margin-top:35rpx;
}

三、js页面代码如下：

//index.js
//获取应用实例
var app = getApp()
var fileData = require('../../utils/data.js')

Page({
  // 页面初始数据
  data: {
      colors:['red','orange','yellow','green','purple'],
      // banner 初始化
      banner_url: fileData.getBannerData(),
      indicatorDots: true,
      vertical: false,
      autoplay: true,
      interval: 3000,
      duration: 1000,
      // nav 初始化
      navTopItems: fileData.getIndexNavData(),
      navSectionItems: fileData.getIndexNavSectionData(),
      curNavId: 1,
		  curIndex: 0
  },
   
  onLoad:function(){
    var that = this
    that.setData({
      list: that.data.navSectionItems
    })
  },
  //标签切换
  switchTab: function(e) {
      let id = e.currentTarget.dataset.id,
      index = parseInt(e.currentTarget.dataset.index)
      this.curIndex = parseInt(e.currentTarget.dataset.index)
      console.log(e)
      var that = this
      this.setData({
        curNavId: id,
        curIndex: index,
      })
      
  },
  // 跳转至详情页
  navigateDetail: function(e){
    wx.navigateTo({
      url:'../detail/detail?artype=' + e.currentTarget.dataset.artype
    })
  },
  // 加载更多
  loadMore: function (e) {
    console.log('加载更多')
    var curid = this.data.curIndex

    if (this.data.navSectionItems[curid].length === 0) return
    
    var that = this
    that.data.navSectionItems[curid] = that.data.navSectionItems[curid].concat(that.data.navSectionItems[curid])
    that.setData({
      list: that.data.navSectionItems,
    }) 
  },
  // book
  bookTap: function(e){
    wx.navigateTo({
      url:'../book/book?aid='+e.currentTarget.dataset.aid
    })
  }
  
})

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