首页 > 小程序教程 > 微信小程序生活服务优选推荐导航设计制作开发教程

微信小程序生活服务优选推荐导航设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序生活服务优选推荐导航设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<import src="../index/GridIconCell/GridIconCell.wxml" />
<import src="ImageCell/ImageCell.wxml" />
<import src="GoodLife/GoodLifeCell/GoodLifeCell.wxml" />

<view>

  <view class="iconList-container">
    <block wx:for="{{shenghuoiconList}}" wx:for-item="item" wx:for-index="idx" wx:key="key">
      <view class="iconList-container-block" catchtap="tapGridCell" data-icon-id="{{idx}}">
        <template is="GridIconCell" data="{{...item}}"></template>
      </view>
    </block>
  </view>

  <view class="spaceSeparateView"></view>

  <view class="imageList-container">
    <block wx:for="{{shenghuoImageList1}}" wx:for-item="item" wx:for-index="idx" wx:key="key">
      <view class="imageList-container-block" catchtap="tapimageList1Cell" data-icon-id="{{idx}}">
        <template is="ImageCell" data="{{...item}}"></template>
      </view>
    </block>
  </view>

  <view class="imageList-container">
    <block wx:for="{{shenghuoImageList2}}" wx:for-item="item" wx:for-index="idx" wx:key="key">
      <view class="imageList-container-block" catchtap="tapimageList1Cell" data-icon-id="{{idx}}">
        <template is="ImageCell" data="{{...item}}"></template>
      </view>
    </block>
  </view>

  <view class="youxuanHeader">
    <text class="youxuanHeaderText">--优选推荐--</text>
  </view>
  <block wx:for="{{list}}" wx:for-item="item" wx:key="key">
    <!--<view class="CouponSearchListCell">{{item.doorName}}</view>-->
    <template is="GoodLifeCell" data="{{...item}}"></template>
  </block>
</view>
 
二、wxss样式文件代码如下:
@import "../index/GridIconCell/GridIconCell.wxss";
@import "ImageCell/ImageCell.wxss";
@import "GoodLife/GoodLifeCell/GoodLifeCell.wxss";

.iconList-container {
  flex-direction: row;
  display: flex;
  width: 100%;
  height: 160rpx;
}

.iconList-container-block {
  flex-direction: row;
  display: flex;
  width: 25%;
  height: 160rpx;
}

.imageList-container {
  flex-direction: row;
  display: flex;
  width: 100%;
  height: 260rpx;
}

.imageList-container-block {
  flex-direction: row;
  display: flex;
  width: 33.3%;
  height: 260rpx;
}
.youxuanHeader {
  height: 80rpx;
  width: 100%;
  background-color: #f5f5f9;
  text-align: center;

}

.youxuanHeaderText {
  line-height: 80rpx;
  width: 100%;
  font-size: 15px;
  color: gray;


}
三、js页面代码如下:
// pages/shenghuo/shenghuo.js
const shenghuoiconList = require('../../data/local-data')
const shenghuoImageList1 = require('../../data/local-data')
const shenghuoImageList2 = require('../../data/local-data')

const config = require('../../config')
var util = require('../../utils/util.js')

// 引入SDK核心类 - 腾讯LBS服务(微信小程序原生LBS能力的最佳拍档)
var QQMapWX = require('../../lbs/qqmap-wx-jssdk.js');
var qqmapsdk;

let TENCENT_KEY = "AJPBZ-S6MRU-NFIVK-4BH5A-IZA57-OKB24"

var longt = ""
var lati = ""

Page({
  data: {
    localCtiyName: "定位中...",  /** 当前定位城市 */
    list: [] /** 便民首页优选推荐店铺列表 */
  },

  /** 点击 */
  tapGridCell: function (event) {
    let index = event.currentTarget.dataset.iconId
    console.log(index)

    switch (index) {
      case 0: //领券中心
        wx.navigateTo({
          url: 'ValuePreference/ValuePreference',
        })
        break;
      case 1: //吃喝玩乐
        wx.navigateTo({
          url: 'GoodLife/GoodLife',
        })
        break;
      case 2: //精选商品
        wx.navigateTo({
          url: 'SelectedGoods/SelectedGoods',
        })
        break;
      case 3: //分类服务
        wx.navigateTo({
          url: 'AllServiceclassify/AllServiceclassify'
        })
        break;

    }


  },

  tapimageList1Cell: function (event) {
    switch (event.currentTarget.dataset.iconId) {
      case 0:
        //天天有奖
        wx.navigateTo({
          url: 'ttPrize/ttPrize',
        })
        break;
      case 1:
        wx.navigateTo({
          url: 'miaosha/miaosha',
        })
        break;
      case 2:
        //一元夺宝
        wx.navigateTo({
          url: 'OnePrize/OnePrize',
        })
        break;
      default:
        break;
    }

    console.log(event.currentTarget.dataset.iconId)
  },

  tapimageList2Cell: function (event) {
    console.log(event.currentTarget.dataset.iconId)
  },

  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数

    var that = this;

    console.log(shenghuoiconList, shenghuoImageList1, shenghuoImageList2)

    that.setData(shenghuoiconList, shenghuoImageList1, shenghuoImageList2)

    /*******************定位***********************/
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: TENCENT_KEY
    });
    /** 获取定位 */
    wx.showLoading({ title: '加载中...', })
    util.getLocation((successRes, failRes) => {
      wx.hideLoading()
      console.log(successRes)
      console.log(failRes)

      //赋值
      longt = successRes.longitude
      lati = successRes.latitude

      // 调用接口-逆地址解析
      qqmapsdk.reverseGeocoder({
        location: {
          latitude: successRes.latitude,
          longitude: successRes.longitude
        },
        coord_type: 1,//输入的locations的坐标类型,可选值为[1,6]之间的整数,每个数字代表的类型说明: 1 GPS坐标 2 sogou经纬度 3 baidu经纬度 4 mapbar经纬度 5 [默认]腾讯、google、高德坐标 6 sogou墨卡托
        success: function (res) {
          console.log(res);

          var city = res.result.address_component.city;
          that.setData({ localCtiyName: city });
          console.log(city);

          /** 首次定位成功 -> 网络请求 */
          /** 请求-便民首页优选推荐店铺列表 */
          that.requestAdvertRecommendDoorList()
        },
        fail: function (res) {
          console.log(res);
        },
        complete: function (res) {
          console.log(res);
        }
      });
    })
  },
  /** 便民首页优选推荐店铺列表 */
  requestAdvertRecommendDoorList: function (e) {
    var that = this;
    let url = config.RecommendDoorListUrl

    var para = {
      "currentLongitude": longt,
      "currentLattitude": lati
    }

    wx.showLoading({ title: '加载中...' })

    util.RequestManager(url, para, function (res, fail) {

      wx.hideLoading()
      
      var tempAr = [];

      for (var i = 0; i < res.data.length; i++) {
        var model = res.data[i];
        model["doorImg"] = model["logo"];
        model["starAr"] = util.convertToStarsArray(model["star"])
        model["province"] = model["provinceName"];
        model["city"] = model["cityName"];
        model["country"] = model["districtName"];
        //model["maxDiscountPrice"] = model["maxDiscountPrice"];
        tempAr.push(model)
      }

      that.setData({ list: tempAr })

    })
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  }
})

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

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