微信小程序顶部幻灯更多店面展示列表设计制作开发教程

本文给大家带来的是微信小程序顶部幻灯更多店面展示列表设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<!--pages/more/more.wxml-->
<import src="../../template/slider/slider.wxml"/>
<template is="slider" data="{{slider}}"/>
<view class="container">
    <!-- 全部门店 -->
    <view class="store-list-all">
        <text class="title">期待与您不期而遇</text>
        <text class="sub-title">五洲会2017将覆盖100个城市，新增1000家门店</text>
        <view class="store-list clearfix">
            <view class="pstore-item" wx:for="{{allStoreData}}" wx:key="region_name" data-region-name="{{item.region_name}}" bindtap="itemProvClick">
                <text class="name">{{item.region_name}}</text>
                <text class="nums">{{item.store_nums}}家</text>
            </view>
        </view>
    </view>
    <!--本地门店-->
    <view class="store-list-local"  wx:if="{{showCurrentStoreList}}">
        <view class="store-count" wx:if="storeMoreData.length > 0">
            当前区域共有门店{{storeMoreData.length}}家
        </view>
        <view class="store-count" wx:else>当前所选区域暂无门店</view>
        <view class="store-list-box">
            <view class="store-item" wx:for="{{storeMoreData}}" wx:key="{{item.id}}" data-item="{{item}}" catchtap="toStoreDetail">
                <view class="store-status {{item.delivery_sta_format == '可配送' ? 'green' : 'gray'}}" > {{item.delivery_sta_format}} </view>
                <image class="store-pic" src="{{item.landmark_img_format||item.store_picture_list[0]}}"></image>
                <view class="store-basic-info">
                    <view class="store-name">
                        <text class="sd-name"> {{item.store_name}} </text>
                        <text class="dtag" wx:for="{{item.store_activity_list}}" wx:for-item="tagItem" wx:key="*this" style="background-color: {{ tagItem[1] }}">{{tagItem[0]}}</text>
                    </view>
                    <view class="store-distance">
                        <span class="icon icon-map"></span>    
                        <text>{{item.distance_format}}</text>
                    </view>
                </view>
                <view class="store-adress">{{item.store_address}}</view>
            </view>
        </view>
    </view>
    <view class="no-store-tip-msg" wx:else>
        本地区暂不支持，您可以通过查看其他支持的省份地区，了解我们的门店信息！或者登录我们的PC官方网站：<text>https://www.wzhouhui.com/</text>进行线上购买下单
    </view>
</view>

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

/* pages/more/more.wxss */
.store-list-all{
    padding: 20rpx;
    text-align: center;
    background-color: #fff;
}
.title{
    display: block;
    font-size: 32rpx;
    color: #222;
    padding: 10rpx 0 20rpx;
}
.sub-title{
    font-size: 24rpx;
    display: block;
    color: #666;
}
.store-list{
    margin-top: 30rpx;
    font-size: 24rpx;
    border: solid #e8e8e8;
    border-width: 1px 0 0 1px;
}
.pstore-item{
    float: left;
    display: flex;
    width: 33.33%; 
    color: #222;
}
.pstore-item text{
    display: block; /**此处必须为block**/
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 10rpx 0;
    border: solid #e8e8e8;
    border-width: 0 1px 1px 0;   
}
.pstore-item .name{
    width: 65%;
    background-color: #fafafa;
}
.pstore-item .nums{
    width: 35%;
}
/*当前区域门店*/
.store-list-local{
    width: 100%;
    margin-top: 20rpx;
}
/* 门店数量*/
.store-count{
    padding: 20rpx 30rpx;
    background-color: #fff;
    border-bottom: solid #e8e8e8 1px;
    font-size: 24rpx;
    color: #999;
}
.store-item{
    position: relative;
    margin-bottom: 20rpx;
    background-color: #fff;
    border-bottom: solid #e8e8e8 1px;
    overflow: hidden;  
}
.store-status{
    position: absolute;
    right: 20rpx;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130rpx;
    height: 60rpx;
    background: url(../../image/store-status.png) no-repeat;
    background-size: 130rpx auto;
    font-size: 28rpx;
    color: #fff;
}
.store-status.green{
    background-position: 0 0;
}
.store-status.gray{
    background-position: left bottom;
}
.store-pic{
    display: block;
    width: 100%;
    height: 400rpx
}
.store-basic-info,.store-adress{
    margin: 40rpx 20rpx;
}
.store-basic-info{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.store-name{
    display: flex;
    align-items: center;
    font-size: 32rpx;
    font-weight: bold;
}
.store-distance, .store-distance .icon{
    font-size: 24rpx;
    color: #666;
    margin-right: 5rpx;
}
.store-adress{
    font-size: 28rpx;
    color: #666;
}
/*优惠小标签*/
.dtag{
    display: inline-block;
    margin: 4rpx;
    padding: 4rpx 6rpx;
    color: #fff;
    font-style: normal;
    font-weight: normal;
    background-color: #49caec;
    border-radius: 4px;
    font-size: 24rpx;
}
.no-store-tip-msg{
    padding: 50rpx 20rpx;
    line-height: 1.5;
    background-color: #fff;
    font-size: 28rpx;
    color: #222;
    text-align: justify;
}
.no-store-tip-msg text{
    color:#e61773;
}
@import "../../css/font.wxss";

三、js页面代码如下：

// pages/more/more.js
var polyfill = require('../../utils/polyfill.js')
var util = require('../../utils/util.js');
var ports = require('../../utils/ports.js');
//引入灯箱组件
var Slider = require('../../template/slider/slider.js');
// 引入promise
var Promise = require('../../lib/es6-promise.min.js'); 
// 优惠标签配色
var tagColor = util.getTagColor();
var dialog = [
    {
      title: '未获得定位服务',
      content: '更多门店优惠等您开启~~',
      showCancel: false,
      confirmText: '确定'
    },
    {
      title: '未获得定位服务',
      content: '但发现您有可支持配送的地址',
      cancelText: '继续浏览',
      confirmText: '切换地址',
      confirmColor: '#e61773',
      success: function(res){
          if (res.confirm) {
            console.log('用户点击确定')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
      }
    },
    {
      title: '当前城市暂未开通五洲门店服务',
      content: '是否更换城市查看',
      cancelText: '继续浏览',
      confirmText: '更换城市', 
      confirmColor: '#e61773',
      success: function(res){
          if (res.confirm) {
            console.log('用户点击确定')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
      }
    },
    {
      title: '您有可支持配送的地址',
      content: '是否切换至该收货地址？',
      cancelText: '不切换',
      confirmText: '切换',
      confirmColor: '#e61773',
      success: function(res){
          if (res.confirm) {
            console.log('用户点击确定')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
      }
    }
];
// 获取地区列表
var regionList = util.getStorage('regionList');
if(regionList){
    regionList = JSON.parse(regionList);
}
Page({
  data:{
      // 全国门店数据
      allStoreData: [],
      // 更多门店数据
      storeMoreData:{},
      // 收货/定位地址
      finalAddress:{},
      // 标识：来自地址选择
      addressSelect:false,
      // 省列表
      provincesData: [],
      // 市列表
      // citysData: [],
      // 选中的省
      selectedProvince: 6,
      // 选中的市
      selectedCity: 0,
      // 经度
      lng: 113.915669,
      // 纬度
      lat: 22.514068,
      showAddress:'',
      showCurrentStoreList:true
  },
  computed: function(){
      var _self = this;
      this.setData({
          provincesData: regionList.filter(item=>{
              return !item.parent;
          })
      });
  },
  itemProvClick(event){
      var  provId = this.data.provincesData.filter(item=>{
               return item.name == (event.target.dataset.regionName || event.currentTarget.dataset.regionName);
          })[0].value;
      this.getData({
          province_id: provId,
          city_id:0,
          flag:0
      });
  },
  //去门店详情页
  toStoreDetail(event){
        console.log(event)
  },
  //获取门店数据
  getData: function(data){
      var _self = this, 
          sdata = {
              province_id: this.data.selectedProvince,
              city_id: this.data.selectedCity,
              lng: this.data.lng,
              lat: this.data.lat,
              page: 1,
              flag: 1         
          };
      sdata = polyfill.object.assignIn(sdata,data);
      util.wxRequest({
          method: 'POST',
          url: ports.storeMore,
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          },
          data: sdata
      }).then(result =>{
          var data = result.data;
          if(sdata.flag == 1){
            //获取全国数据
            _self.setData({
                allStoreData: data.storeDistribution
            });
          }
          //整理标签颜色
          for(let i = 0; i < data.store_list.length; i++){
              var store_item = data.store_list[i];
              for(let j = 0; j < store_item.store_activity_list.length;j++){
                    store_item.store_activity_list[j] = _self.dTag(store_item.store_activity_list[j],j);
              }
          }
          // 门店列表数据
          _self.setData({
              storeMoreData: data.store_list
          });       
      }).catch((e)=>{
          wx.showToast({
              title: '获取数据失败',
              duration: 2000
          }); 
      });
  },
  dTag:function(tag, index){
        var tagName=/^[(.)]/.exec(tag)[1];
        // 循环使用颜色
        return [tagName,tagColor[index%tagColor.length]];
  },
  onLoad:function(options){
      this.slider = new Slider(this);
      this.slider.initData([
            'https://img02.wzhouhui.net/optm/ad/2017/03/08/orig/e22542db46cefea5dfb51f7c7ba8d3817824e65c.jpg',
            'https://img02.wzhouhui.net/optm/ad/2017/03/08/orig/610d7f02a200cdb27b005b4d5cb2b67f2e6314d0.jpg',
            'https://img02.wzhouhui.net/optm/ad/2017/03/08/orig/05f531fa8b97da6987153b20ca71f3844c56e62a.jpg',
            'https://img02.wzhouhui.net/optm/ad/2017/03/08/orig/d51c19b84bbc45a8d15b460fcd6ae99768527638.jpg'
      ]);
      var _self = this,
          // 本地缓存中有地址信息时
          finalAddress = util.getStorage('final_address');
      this.computed();
      if(finalAddress){
          var tempfinalAddress = JSON.parse(finalAddress);
          this.setData({
              finalAddress: tempfinalAddress,
              showAddress: tempfinalAddress.location_addr || '定位失败'
          });
          try{
              this.setData({
                  addressSelect: true,
                  selectedProvince: regionList.filter(item=>{
                      return item.value == _self.data.finalAddress.region_id;
                  })[0].parent,
                  selectedCity: _self.data.finalAddress.region_id,
                  lng: _self.data.finalAddress.lng,
                  lat: _self.data.finalAddress.lat
              });              
          }catch(e){
              // 当定位的城市不在有门店的城市列表中时
              this.setData({
                  showCurrentStoreList: false
              });
          }
    }
    this.getData();
    // 来自页面分发
    var switchInfo = util.getStorage("page_switch_info");
    if(switchInfo){
        switchInfo=JSON.parse(switchInfo);
        // 清空分发配置
        util.removeStorage("page_switch_info");
        if(switchInfo.popType){
            dialog[switchInfo.popType-1].cancelColor = "#666666";
            dialog[switchInfo.popType-1].confirmColor = "#666666";
            wx.showModal(dialog[switchInfo.popType-1]);
        }
    }
  },
  onPullDownRefresh: function(){
    wx.stopPullDownRefresh()
  },  
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){

  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

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