首页 > 小程序教程 > 微信小程序多图标商家搜索汽车服务样式设计制作开发教程

微信小程序多图标商家搜索汽车服务样式设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序多图标商家搜索汽车服务样式设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="home-wrap">
  <swiper indicator-dots="true" autoplay="{{autoplay}}" duration="{{duration}}" interval="{{interval}}">
    <view wx:for="{{banner}}" wx:key="unique">
      <swiper-item>
        <view>
          <navigator url="{{item.jumpurl}}"><image src="{{item.adimage}}" mode="scaleToFill center" class="banner"></image></navigator>
        </view>
      </swiper-item>
    </view>
  </swiper>
  <view class="scroll-txt" bindtap="search">
  	<icon type="search" size="14" style="margin: 0px 5px 0 0"></icon>
    <text class="scroll-ads">搜索</text>
  </view>
  <view class="ads-list">
  	<view class="ads-item" bindtap="vipcard">
	    <image src="../../images/index_vip.png" mode="scaleToFill center"></image>
	    <text>云车会员卡</text>
    </view>
    <view class="ads-item" bindtap="gotoWeizhang">
	    <image src="../../images/index_weizhang.png" mode="scaleToFill center"></image>
	    <text>违章查询</text>
    </view>
  </view>
  <view class="workbench">
    <text class="title">商家专区</text>
    <view class="hot-list">
      <view class="hot-item" wx:for="{{shopType}}" wx:key="unique" wx:for-item="item" data-id="{{item.type}}" data-title="{{item.typeName}}" bindtap="gotoShop">
        <image src="{{item.icon}}" mode="scaleToFill center"></image>
        <text>{{item.typeName}}</text>
      </view>
    </view>
  </view>
  <view class="workbench">
    <text class="title">汽车服务</text>
    <view class="hot-list">
      <view class="hot-item" wx:for="{{serviceType}}" wx:key="unique" wx:for-item="item" data-id="{{item.type}}" data-title="{{item.typeName}}" bindtap="gotoService">
        <image src="{{item.icon}}" mode="scaleToFill center"></image>
        <text>{{item.typeName}}</text>
      </view>
    </view>
  </view>
</view>
 
二、wxss样式文件代码如下:
.home-wrap{
  background: #f2f2f2;
}
.banner{
  width: 100%;
  height: 360rpx;
}
.scroll-txt{
  text-align: center;
  background: #fff; 
  margin: 10rpx 20rpx;
  border: 10px transparent;
  padding: 12rpx 0 12rpx 0;
  color: #333;
}
.scroll-ads{
  text-align: center;
  font-size: 28rpx;
}
.ads-list{
  display: flex;
  flex-direction: row;
  flex:1;
  margin-bottom: 1rpx;
}
.ads-item{
  flex:1;
}
.ads-item image{
  width: 250rpx;
  height: 250rpx;
  margin:auto;
  display:block;
}
.ads-item text{
  font-size: 26rpx;
  display: block;
  color: #333;
  margin: 18rpx auto;
  text-align:center;
}
.sub-banner{
  width: 100%;
  height: 120px;
}

.workbench{
  font-size: 28rpx;
  background: #fff;
  padding-bottom: 10rpx;
  margin-bottom:10rpx;
  color: #333;
}
.workbench .title{
  font-size:30rpx;
  padding: 20rpx 20rpx;
  display: block;
}

.hot-list{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex:1;
}
.hot-item{
  text-align: center;
  background: #fff;
  width: 186rpx;
  text-align: center;
}
.hot-item image{
  width: 60rpx;
  height:60rpx;
  margin: 10rpx 0;
}
.hot-item text{
  font-size: 24rpx;
  display: block;
  color: #333;
  margin-bottom: 20rpx;
}
.workbench .list{
  display: flex;
  flex-direction: row;
  flex:1;
}
.workbench .items{
  width: 100rpx;
  flex:1;
  text-align: center;
}
.workbench .items image{
  width: 100rpx;
  height: 100rpx;
}
.workbench .items image.service-icon{
  width: 50rpx;
  height: 50rpx;
}
.workbench .items text{
  display: block;
  text-align: center;
  margin-top: 10rpx;
}
三、js页面代码如下:
//获取应用实例
var app = getApp()
var api = require('../../utils/api');
var util = require('../../utils/util');

Page({
  data: {
    banner: null,
    autoplay: true,
    interval: 5000,
    duration: 800,
    shopType: [],
    serviceType: []
  },
  /*
  * 首页banner
  */
  setBanner: function () {
    let that = this;
    api.getAdByType({
      data: {
        adpos: 3,
      },
      success: (res) => {
        that.data.banner = res.data.result;
        that.setData(that.data);
      },
    });
  },
  setTypeList: function() {
    var that = this;
    api.getWelfareTypeList({
      success: (res) => {
        for (var i = res.data.result.length - 1; i >= 0; i--) {
        	var showType = res.data.result[i].showtype;
          if (showType == "1") {
            that.data.shopType.push(res.data.result[i]);
          } else if (showType == "0") {
            that.data.serviceType.push(res.data.result[i]);
          };
        };
        that.setData(that.data);
      }
    });
  },
  search: function() {
    var url = "../search/search";
	wx.navigateTo({
      url: url
    });
  },
  vipcard: function() {
  	wx.navigateTo({
      url: "../vip/vip"
    });
  },
  gotoWeizhang:function() {
	wx.showModal({
	    title: '提示',
	    content: '小程序暂不支持违章查询,目前正在紧锣密鼓开发中,请稍候…',
	    confirmColor: '#479de6',
	    success: function(res) {
	        
	    }
	})
  },
  gotoShop: function(res) {
	let param = res.currentTarget.dataset, title = param.title, id=param.id
    var url = "../merchant/merchant?type="+id+"&title="+ title;
	wx.navigateTo({
      url: url
    });
  },
  gotoService: function(res) {
  	let param = res.currentTarget.dataset, title = param.title, id=param.id
    var url = "../merchant/merchant?type="+id+"&title="+ title;
	wx.navigateTo({
      url: url
    });
  },
  /**
   * 入口
   */
  onLoad: function () {
    var that = this;
    that.setBanner();
    that.setTypeList();
  }
});

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

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 25,021次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-28
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
自适应 单页式简历模板 html5 企业网站 微信文章 表格式简历模板 微信公众平台 响应式 微信模板 Bootstrap
您可能会喜欢的其他模板