微信小程序品牌电梯首页展示样式设计制作开发教程

本文给大家带来的是微信小程序品牌电梯首页展示样式设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<!--index.wxml-->
<view class="page">
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item.photo}}" class="slide-image" width="100%" height="180" bindtap="bannergo" data-type="{{item.type}}" data-action="{{item.action}}"/>
      </swiper-item>
    </block>
  </swiper>

 <view class="er">
<!--定位-->
   <view class="dingwei">
   <view class="sb"  bindtap="getLocation">
     <image mode="aspectFit" src="http://omh7cqphx.bkt.clouddn.com/NAVIGATION_32px.png" class="im"></image> {{address}}
     </view>
   </view>
<!--搜索-->
<view class="sousuo" bindtap="suo">
   <view class="weui-search-bar">
            <view class="weui-search-bar__form">
                <view class="weui-search-bar__box">
                    <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
                    <!--<input type="text" class="weui-search-bar__input" placeholder="请输入搜索内容" disabled="true"/>-->
                    <text class="weui-search-bar__input">点击进行搜索内容</text>
                    <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}">
                        <icon type="clear" size="14"></icon>
                    </view>
                </view>
            </view>
   </view>
</view>


</view> 
<!--分类-->
  <view class="df nav">
    <view class="df_1" bindtap="qiang">
        <image src="/images/jp.png"></image>
        限时抢购
    </view>
    <view class="df_1" bindtap="newpro">
        <image src="/images/new.png"></image>新品推荐
    </view>
    <view class="df_1" bindtap="li">
        <image src="/images/shop.png"></image>新人礼劵
    </view>
    <view class="df_1" bindtap="category">
        <image src="/images/xs.png"></image>全部商品
    </view>
  </view>

  <view class="df nav"  >
    <view wx:for="{{proCat}}" class="df_1" data-id="{{item.id}}" data-text="{{item.name}}" bindtap="dele">
        <image src="{{item.bz_1}}"></image>     
        <text>{{item.name}}</text>  
    </view>
  </view>
  <!--推荐内容开始-->
<view class="name" bindtap="gotobrand">
   <i>品牌街</i>
   <i class="brandclick">></i>
</view>
<!--横滑动-->  
<scroll-view scroll-x="true" class="sc">
 <view class="one" wx:for="{{brand}}" data-id="{{item.id}}" bindtap='jj'> 
    <image src="{{item.photo}}"></image>
 </view> 
</scroll-view>

 <view class="cont">
  <navigator  url="../product/detail?productId={{item.id}}" hover-class="changestyle" wx:for="{{productData}}">
      <image class="cont_image" src="{{item.photo_x}}"></image>
      <view class="title" style="overflow:hidden;">{{item.name}} </view>
      <!--<view class="tit">{{item.intro}} </view>-->
      <view class="gmxx">
        <span class="jiage" style="float:left">¥：{{item.price_yh}}</span>
        <span class="xiaoliang" style="float:right">销量：{{item.shiyong}}</span>  
      </view>
  </navigator>
</view>
<view class="clear mt10" bindtap="getMore" style="display:{{productData==''?'none':'block'}}">点击查看更多</view>

</view>
<view class="lll">
    <image src="../../images/kf.png"> <contact-button></contact-button>  <contact-button></contact-button></image>
</view>

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

/**index.wxss**/
.swiper-item{
  display: block;
  height: 150px;
}
.slide-image{ 
  width: 100%; 
  height: 150px;
}
.nav{
  background: #fff;
  padding: 10px 0;
  width: 100%;
  /*margin: 10px 0;*/
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; 
  text-align: center;
  font-size: 12px;
  color: #666;

}
.nav image{
  width: 40px;
  height: 40px;
  display: block;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 5px;
  border-radius: 15px;
}
.cont{
  width: 99%;
}
.cont navigator {
margin-bottom:10px;
background:#fff;
display:inline-block;
width:46%;
border:1px solid #ccc;
margin-left:20rpx;

}
.cont_image{
  width: 342rpx;
  height:370rpx;
}
.cont .title{
   height:78rpx; 
  font-size:28rpx;
  color: #333;
  line-height:40rpx;
  margin:0; 
   overflow :hidden ;text-overflow:ellipsis; white-space:nowrap; 
  -webkit-line-clamp:2;  
  -webkit-box-orient:vertical;
  padding: 1% 5% 0 5%;
  font-weight: 700
}
.cont .tit{
  /*height: 80rpx;*/
  font-size: 12px;
  color: #333;
  line-height:20px;
  margin:0; 
  max-height:40px; 
  overflow:hidden;  
  text-overflow:ellipsis; 
  display:-webkit-box; 
  -webkit-line-clamp:2;  
  -webkit-box-orient:vertical;
  padding: 1% 5% 0 5%;
  /*color: #ccc*/
}
.gmxx{
  height: 25rpx;
  padding:5% 5% 5% 5%;  
}
.gmxx .jiage{
  font-size: 14px;
  color: #d9002f;
  float:left;
  /*padding-top: 10px; */
}
.gmxx .xiaoliang{
  font-size: 13px;
  color: #ccc;  
  float:right;
  /*padding-top: 10px; */
}

.name{
margin-top: 20rpx;
padding: 10px;
text-align: center;
font-weight: 700;
background: #fff
}
.sc{
 white-space: nowrap;
  display: block;
  height:120px;
  padding-bottom:10px;
}
.one{
    background: white; 
    width: 100px; 
    height: 100px;
    display: inline-block;
    padding: 10px;
}
.one image{
    height: 100%;
    width: 100%;
}
.list{
  background: #fff;
  width: 100%;
}
.ban{
  width: 46%;
  padding: 10rpx ;
  border: 2rpx solid #ccc;
  display: inline-block;
  margin-left:6rpx 
}
.ban image{
  width: 100%;
}
.ellipsis text{
  font-size:30rpx;
  font-weight: 700;
  margin-left: 10rpx;
}




/*定位*/
.er{
   display:inline-block;
   width: 100%;
   background: white
}
.im{
width:20rpx;
height:30rpx;
display:inline-block;
overflow:hidden;
position: relative;
top: 8rpx;
/*left: 10rpx;*/
}
.dingwei{
width:23%;
display:inline-block;
float:left;
font-size: 30rpx;
 margin-top: 28rpx;
 margin-bottom:20rpx;

}
.sb{
display:inline-block;
height:70rpx;
margin:0 15rpx;
width:85%;
background:#F5F5F5;
line-height:70rpx;
border-radius:10rpx;
text-align:center;
margin-left:30rpx;

}
.dingwei text{
  text-align: center;
}
/*搜索*/
.sousuo{
  display:inline-block;
    width:68%;
  margin-left:32rpx;
}
.weui-search-bar {
 margin-top: 28rpx;
 position:relative;
 display:-webkit-box;
 display:-webkit-flex;
 display:flex;
 box-sizing:border-box;
}
.weui-search-bar__box {
position:relative;
padding-left:30px;
padding-right:30px;
width:100%;
box-sizing:border-box;
z-index:1;display:block;
height:68rpx;
line-height:68rpx;

}
.weui-search-bar__form {
position:relative;
-webkit-box-flex:1;
-webkit-flex:auto;
flex:auto;
border-radius:10rpx;
background:#FFFFFF;
border:1rpx solid #E6E6EA;

}
.weui-search-bar__input {
  height:68rpx;
  line-height:68rpx;
  font-size:28rpx;
  color: #ccc;
}
.weui-icon-search_in-box {
position:absolute;
left:20rpx;
top:19rpx;
}
icon{
vertical-align:middle;
}
.weui-search-bar__cancel-btn {
  margin-left:10px;
  line-height:28px;
  color:#09BB07;
  white-space:nowrap;
}

.suo{
  width: 100%;
  height: 89rpx;
  margin-top: 20rpx;
}
.mt10{
  margin: 0 auto;
  text-align: center;
  height: 70rpx;
  width: 450rpx;
  line-height: 70rpx;
  border-radius:10rpx; 
  border: 1px solid #999;
  font-size: 30rpx;
  margin-top: 20rpx;
  margin-bottom: 30rpx;
}
/*在线客服*/
.lll{
width:71rpx;
height:69rpx;
position:fixed;
right:0px;
bottom: 88px;
float: right
}
.lll image{
width:100%;
height:100%;
}
contact-button{
position: relative;
top:-35px;
left:9px;
opacity: 0;
}

/*品牌箭头*/
.brandclick{
  float:right;
  margin-right: 20rpx;
}

三、js页面代码如下：

var app = getApp();
var bmap = require('../budu-map/bmap-wx.min.js'); 
var wxMarkerData = [];
//index.js
Page({
  data: {
       'address':'定位中',
     ak:"AXMRrsEZ0CGfogyRENeexOTkHxauhZtz",   //填写申请到的ak 
    imgUrls: [ 'https://gdp.alicdn.com/imgextra/i1/407700539/TB23I1vabBkpuFjy1zkXXbSpFXa-407700539.jpg',
      'https://gdp.alicdn.com/imgextra/i1/407700539/TB2.bMjXQ1M.eBjSZFOXXc0rFXa-407700539.jpg'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    circular: true,
    productData: [],
    proCat:[],
    page: 2,
    index: 2,
    brand:[],

    // 滑动
    imgUrl: [],
  }, 
   listdetail:function(e){
    console.log(e.currentTarget.dataset.title)
    wx.navigateTo({
      url: '../listdetail/listdetail?title='+e.currentTarget.dataset.title,
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
suo:function(e){
    console.log(e.currentTarget.dataset.title)
    wx.navigateTo({
      url: '../search/search?title='+e.currentTarget.dataset.title,
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
  bannergo: function (e){
    var atype=e.currentTarget.dataset.type;
    var id=e.currentTarget.dataset.action;
    if(atype=="product"){
      wx.navigateTo({
        url: '../product/detail?productId='+id,
      })
    }else if(atype=="partner"){
      wx.navigateTo({
        url: '../shop_store/shop_store?shopId='+id,
      })
    }
  },
qiang:function(e){
    wx.navigateTo({
      url: '../panic/panic',
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
li:function(e){
    wx.navigateTo({
      url: '../ritual/ritual',
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
newpro:function(e){
    wx.navigateTo({
      url: '../listdetail/listdetail?ptype=new',
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
category:function(e){
    console.log(e.currentTarget.dataset.title)
    wx.navigateTo({
      url: '../category/index',
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
dele: function (e) {
  var id =e.currentTarget.dataset.id;
   wx.navigateTo({
    url: '../listdetail/listdetail?cat_id='+id
  });
},
jj:function(e){
    var brand_id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../listdetail/listdetail?brand_id='+brand_id,
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
  changeIndicatorDots: function (e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay: function (e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function (e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function (e) {
    this.setData({
      duration: e.detail.value
    })
  },
//  商品连接数据 
  initProductData: function (data){
    for(var i=0; i<data.length; i++){
      console.log(data[i]);
      var item = data[i];
      item.Price = item.Price/100;
      // item.Price = 100;
      item.ImgUrl = app.d.hostImg + item.ImgUrl;
      
    }
  },
  onLoad: function (options) {
    var that = this;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Index/index',
      method:'post',
      data: {},
      header: {
        'content-type': 'application/json',
      },
      success: function (res) {  
        var ggtop = res.data.ggtop;
        var procat = res.data.procat;
        var prolist = res.data.prolist;
        var brand = res.data.brand;
        //that.initProductData(data);
        that.setData({
          imgUrls:ggtop,
          proCat:procat,
          productData:prolist,
          brand:brand,
        });
        //endInitData
      },
      fail:function(e){
        wx.showToast({
          title: '网络异常！',
          duration: 2000
        });
      },
    })
  // 定位
      // var that = this;  
    /* 获取定位地理位置 */  
    // 新建bmap对象   
    var BMap = new bmap.BMapWX({   
        ak: that.data.ak,
    });   
        console.log(BMap)    
    var fail = function(data) {   
        console.log(data);  
    };   
    var success = function(data) {   
        //返回数据内，已经包含经纬度  
        console.log(data);  
        //使用wxMarkerData获取数据  
        //  = data.wxMarkerData;  
wxMarkerData=data.originalData.result.addressComponent.city
        //把所有数据放在初始化data内  
        console.log(wxMarkerData)
        that.setData({   
            // markers: wxMarkerData,
            // latitude: wxMarkerData[0].latitude,  
            // longitude: wxMarkerData[0].longitude,  
            address: wxMarkerData 
        });  
    }   
    // 发起regeocoding检索请求   
    BMap.regeocoding({   
        fail: fail,   
        success: success  
    });      
  },
  onShareAppMessage: function () {
    return {
      title: '品牌电梯',
      path: '/pages/index/index',
      success: function(res) {
        // 分享成功
      },
      fail: function(res) {
        // 分享失败
      }
    }
  },
  //点击加载更多
  getMore: function (e) {
    var that = this;
    var page = that.data.page;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Index/getlist',
      method: 'post',
      data: { page: page },
      header: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        var prolist = res.data.prolist;
        if (prolist == '') {
          wx.showToast({
            title: '没有更多数据！',
            duration: 2000
          });
          return false;
        }
        //that.initProductData(data);
        that.setData({
          page: page + 1,
          productData: that.data.productData.concat(prolist)
        });
        //endInitData
      },
      fail: function (e) {
        wx.showToast({
          title: '网络异常！',
          duration: 2000
        });
      }
    })
  },
  gotobrand:function (e){
    wx.navigateTo({
      url: '../brand/brand',
    })
  }
});

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