微信小程序套餐保洁服务专区导航页面样式设计制作开发教程

本文给大家带来的是微信小程序套餐保洁服务专区导航页面样式设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<view class="containerbox">
  <view class="wrap">
    <view class="title">{{name.title0}}</view>
    <block class="list" wx:for="{{list0}}" wx:key="item" >
    <view class="item" data-text="{{item.name}}" bindtap="order">
      <image src="{{item.image}}" data-text="{{item.name}}"></image>
      <text class="desc" data-text="{{item.name}}">{{item.name}}</text>
    </view>
    </block>
  </view>
  <view class="wrap">
    <view class="title">{{name.title1}}</view>
    <block wx:for="{{list1}}" wx:key="item">
    <view class="item" data-text="{{item.name}}" bindtap="order">
      <image src="{{item.image}}" data-text="{{item.name}}"></image>
      <text class="desc" data-text="{{item.name}}">{{item.name}}</text>
    </view>
    </block>
  </view>
</view>

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

.containerbox{
  width:100%;
  background-color: #f8f8f8;
}
.wrap{
  background-color: #fff;
  width:100%;
  position: relative;
}
.wrap:not(:first-child){
  margin-top: 10px;
}
.wrap:before{
    position: absolute;
    bottom: -1px;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    border-bottom: 1px #dadada solid;
}
.title{
  padding-left: 20px;
  box-sizing: border-box;
  font-weight: 700;
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-top: 1px solid #dadada;
  border-bottom: 1px solid #dadada;
}
.item{
  text-align: center;
  width: 25%;
  display: inline-block;
  font-size: 22rpx;
  color:#000;
  padding: 6px;
  box-sizing: border-box;
}
.item image{
  width: 50px;
  height: 50px;
  display: block;
  margin: 0 auto;
}
.item text{
  display: block;
}

三、js页面代码如下：

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    name:[],
    list0:[],
    list1:[]
  },
  order:function(e){
    console.log(e.target.dataset.text);
    wx.setStorage({
      key:'kind',
      data:e.target.dataset.text
    })
    if(e.target.dataset.text === "擦玻璃"){
      wx.navigateTo({
        url: '../cleanwindow/index'
      })
    }
  },
  onLoad:function(){
    wx.request({
      url:'http://easy-mock.com/mock/5911a42cacb959185b0c4201/more/server',
      method:'GET',
      data:{},
      datatype:'json',
      header:{
        'Accept':'application/json'
      },
      success:(res) => {
        // console.log(res.data.title);
        this.setData({
          name:res.data
        })
      }
    });
    wx.request({
      url:'http://easy-mock.com/mock/5911a42cacb959185b0c4201/more/item',
      method:'GET',
      data:{},
      datatype:'json',
      header:{
        'Accept':'application/json'
      },
      success:(res) => {
        console.log(res.data);
        this.setData({
          list0:res.data.list0,
          list1:res.data.list1,
        })
      }
    })
  }
})

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