微信小程序阿姨帮家政保洁服务首页样式设计制作开发教程

本文给大家带来的是微信小程序阿姨帮家政保洁服务首页样式设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<view class="container">
  <swiper
  class="binner"
   vertical="{{vertical}}"
   autoplay="{{autoplay}}"
   interval="{{interval}}"
   duration="{{duration}}"
   indicator-dots="{{indicatorDots}}">
    <block wx:for="{{topimg}}" wx:key="item">
      <swiper-item>
        <image src="{{item.image}}" class="slide-image"></image>
      </swiper-item>
    </block>
    <view class="city" bindtap="bindViewTap" >
         <text class="current">{{city}}</text>
    </view>
  </swiper>
  <view class="services">
      <view class="wraper">
      <block wx:for="{{serverlist}}" wx:key="{{item}}" >
       <view class="list" bindtap="gotoserver">
          <image src="{{item.imageUrl}}"/>
          <text class="desc">{{item.description}}</text>
       </view>
      </block>
     </view>
  </view>
  <view class="wrap">
     <view class="cleanitem flex">
       <view class="left" bindtap="gotoserver">
         <view>
           <text class="title">{{title}}</text>
           <text class="desc">{{desc}}</text>
           <image src="{{image}}"/>
         </view>
       </view>
       <view class="right" bindtap="gotoserver">
         <block wx:for="{{clean}}" wx:key="{{item}}">
           <view class="flex box">
             <view class="flex-auto">
               <text class="title">{{item.title}}</text>
               <text class="desc">{{item.desc}}</text>
             </view>
             <image src="{{item.img}}"/>
           </view>
         </block>
       </view>
     </view>
  </view>
  <view class="recombox">
    <text class="hot">{{hot}}</text>
    <block wx:for="{{recomlist}}" wx:key="{{item}}">
      <view url="url" class="recom">
        <image class="produ" src="{{item.img}}"/>
      </view>
    </block>
  </view>
</view>

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

.container{
  background-color: #f8f8f8;
}
.binner{
  width: 100%;
  height: 150px;
  box-sizing: border-box;
}
.slide-image{
  width: 100%;
  height: 150px;
}
.city{
  font-size: 16px;
  display: block;
  width: 80px;
  height: 30px;
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 8px;
  background-color: #838898;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAQCAYAAAAFzx/vAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkM1MEE3OEFGMUIzQTExRTY4Qjg4QzMwNTQ4RTJFQzg1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkM1MEE3OEIwMUIzQTExRTY4Qjg4QzMwNTQ4RTJFQzg1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QzUwQTc4QUQxQjNBMTFFNjhCODhDMzA1NDhFMkVDODUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QzUwQTc4QUUxQjNBMTFFNjhCODhDMzA1NDhFMkVDODUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7Dtt+sAAAA/ElEQVR42mL8////fgYGBi4g9gbiNwy0ASJAvBWIvzEALbz7HwJOADEfEDNQGfNDzQaBuyABXSB+CxXYC8RcVLSMC2rmf6gdujAJcyD+DJXYCMRsVLCMDWrWf6jZIDsYkBU4AfF3qIIlQMxMgWUgvUuhZv2Ams2AbiEI+wHxb6jC6UDMSIZljFC9/6Fm+SHLY9MQDcT/oBo6yLCwE6r3H9QsBkIWgnDmfwSoIMGySiR9mdjUUKQZjyMrcakjZEgHvuAhJxooSgBICe0PsQmNoiQOZf+Ayi0lJitRkonJKiwoKabekVMcUlIQk1XggyOYjKpmO5TtSWqVBhBgABYd7RrM6iJwAAAAAElFTkSuQmCC');
  background-repeat: no-repeat;
  background-position:85%;
  background-size: 12px 8px;
  box-sizing: border-box;
  padding: 7px 0 7px 12px;
  color: #fff;
}
.services{
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  border-bottom: 1px solid #dadada;
  background-color: #fff;
}
.services .wraper{
  width: 90%;
  margin: 0 auto;
  padding-left: 8px;
  box-sizing: border-box;
}
.list{
  display: inline-block;
  width: 20%;
  margin: 12px auto;
  font-size: 12px;
  color: #333;
}
.list image{
  width: 50px;
  height: 50px;
  display: block;
  margin-bottom: 8px;
}
.list .desc{
  text-align: center;
}
.wrap{
  width: 100%;
  margin-top: 10px;
}
.cleanitem{
  width: 100%;
  border-top: 1px solid #dadada;
  border-bottom: 1px solid #dadada;
  background-color: #fff;
  margin-bottom: 10px;
}
.flex{
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}
.left,.right{
  width: 50%;
  height: 100%;
  box-sizing: border-box;
}
.left{
  border-right:1px solid #dadada;
  padding-top: 20px;
  text-align: center;
}
.left .title,
.right .title{
  display: block;
  font-size: 14px;
  font-weight: 700;
}
.left .title{
    text-align: center;
    color: #00beaf;
}
.right .title{
  color: #6cd01b
}
.right text{
  padding-left: 8px;
  padding-bottom: 8px;
}
.left .desc,
.right .desc{
  color: #999;
  font-size: 14px;
}
.left image{
  width: 100%;
  height: 143px;
}
.right .flex{
  align-items: center;
}
.right .flex-auto{
  flex:1;
}
.right image{
  width: 50px;
  height: 50px;
}
.right .box{
  width: 100%;
  height: 100px;
  line-height: 10px;
}
.right .box:first-child{
  border-bottom: 1px solid #dadada;
}
.recombox{
  width: 100%;
  box-sizing: border-box;
  padding: 16px 10px;
  background-color: #fff;
  border-top: 1px solid #dadada;
}
.hot{
  color: #999;
}
.recom{
  width: 100%;
  margin-top: 8px;
}
.recom .produ{
  width: 100%;
  height: 153px;
}

三、js页面代码如下：

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    indicatorDots:true,
    vertical:false,
    autoplay:true,
    interval:3000,
    duration:1200,
    topimg:[],
    city:'',
    topimg:'',
    serverlist:[],
    title:'',
    desc:'',
    clean:[],
    image:'',
    hot:'',
    recomlist:[]
  },
  bindViewTap:function(e){
    wx.navigateTo({
        url: '../city/index'
    })
  },
  gotoserver:function(e){
    wx.navigateTo({
      url: '../server/index'
    })
  },
  // onShow函数页面显示的时候调用，将数据接口放到此处可以实现页面的刷新
  onShow:function(){
    let that=this;
    // 调用getStorageAPI同步数据
    wx.getStorage({
      key: 'city',
      success:function(res){
          console.log(res.data);
          that.setData({
            city:res.data
          })
      }
    })
  },
  onLoad:function(){
    var page=this;
    wx.getLocation({
      type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
      success: function(res){
        // success
        var longitude=res.longitude;
        var latitude=res.latitude;
        page.loadCity(longitude,latitude);
    },
    fail: function() {
      // fail
    },
    complete: function() {
      // complete
    }
   })
  },
  loadCity:function(longitude,latitude){
    var page =this;
    wx.request({
      url: 'http://api.map.baidu.com/geocoder/v2/?ak=btsVVWf0TM1zUBEbzFz6QqWF&callback=renderReverse&location='+latitude+','+longitude+'&output=json&pois=1',
      data: {},
      header:{
        'Content-Type':'application/json'
      },
      success: function(res){
        // success
        console.log(res);
        var str1=res.data;
        var str2=str1.replace("renderReverse&&renderReverse(","");
        var str3=str2.substring(0,str2.length-1);
        var cityresult=JSON.parse(str3);
        console.log(typeof(cityresult));
        var city1=cityresult.result.addressComponent.city;
        var city=city1.replace("市","");
        // wx.setStorage({
        //   key:"city",
        //   data:city
        // })
        page.setData({
          city:city
        });
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
    wx.request({
      url:'http://www.easy-mock.com/mock/5906811e7a878d73716e32c9/viplist/home',
      method:'GET',
      data:{},
      header:{
        'Accept':'application/json'
      },
      success:(res) => {
        console.log(res);
        this.setData({
          topimg:res.data.topimg,
          serverlist:res.data.serverlist,
          title:res.data.title,
          desc:res.data.desc,
          image:res.data.image,
          clean:res.data.clean,
          hot:res.data.hot,
          recomlist:res.data.recomlist
        })
      }
    })
  }
})

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