<!--pages/referenceprice/referenceprice.wxml--> <view class="tool-tip " wx:if="{{popMsg}}"> <text class="{{popType}}">{{popMsg}}</text> </view> <view> <view class="row row-no-padding "> <view class="col-25 stable-bg"> <view class="list list-borderless "> <view class="item {{classifyIndex==index?'classify-selected':'stable-bg'}}" bindtap="getClassifyDetails" data-index="{{index}}" wx:for="{{productList}}" wx:for-item="item" wx:key="*this" wx:for-index="index"> <text class="icon iconfont {{item.imgurl}}"></text> <view class="h2 text-wrap"> {{item.name}}</view> </view> </view> </view> <view class="col-75"> <scroll-view scroll-y enable-back-to-top> <view class="list list-borderless "> <view class="item" wx:for="{{classifyDetails}}" wx:for-item="item" wx:key="*this" wx:if="{{item.name!='电池'}}"> <view class="p text-wrap"> {{item.grpid==1?item.name:(item.type=="不限"||item.type==null?"":item.type)+(item.size=="不限"||item.size==null?"":item.size)+(item.other=="不限"||item.other==null?"":item.other)}} <view class="nowrap yuan"> <text class="energized ">{{item.hsprice}}</text> 元/台 </view> </view> </view> </view> </scroll-view> </view> </view> </view> |
/* pages/referenceprice/referenceprice.wxss */ /*.row { position: relative; } .col-25 { position: fixed; width: 25%; } .col-75 { position: relative; width: 75%; left: 25%; }*/ .col-25 .item { text-align: center; padding-left: 0; padding-right: 0; } .col-25 .item .h2 { font-size: 0.9rem !important; } .col-25 .item .iconfont { font-size: 1.5rem !important; } .classify-selected { border-left: 3px solid #00ACFF !important; color: #00ACFF; } .yuan { position: absolute; right: 0.3rem; top: 0.7rem; } .yuan text { font-size: 1rem; } |
// pages/referenceprice/referenceprice.js //获取应用实例 var app = getApp(); var util = require('../../utils/util.js'); Page({ /** * 页面的初始数据 */ data: { classifyIndex: 0,////选中产品分类标示 isth: 0,//是否统货 productList: [], productLists: [] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.getPiceData(); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, /** * 点击产品分类获取产品分类详情 */ getClassifyDetails: function (e) { wx.pageScrollTo({ scrollTop: 0 }) var index = e.currentTarget.dataset.index || 0; this.setData({ classifyIndex: index, classifyDetails: this.data.productLists[index].details }) }, /** * 获取参考价格数据 */ getPiceData: function () { var that = this; //获取产品品类 var indexs = 0; util.getProductList(that, function (data) { if (data.code == 1001) { that.setData({ productList: data.data }) for (var index in data.data) { that.setData({ grpid: data.data[index].grpid }) //根据产品品类及是否统货取产品列表 util.getProductListIsth(that, function (datas) { if (datas.code == 1001) { var items = data.data[indexs]; items.details = datas.data; that.data.productLists.push(items); } if (indexs == 0) { that.setData({ classifyDetails: datas.data }) } indexs++; }) } } else { util.toolTip(that, data.message) } }) } }) |
模板简介:该模板名称为【微信小程序家用电器品牌列表页展示设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。