首页 > 小程序教程 > 微信小程序家用电器品牌列表页展示设计制作开发教程

微信小程序家用电器品牌列表页展示设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序家用电器品牌列表页展示设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--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>
 
二、wxss样式文件代码如下:
/* 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;
}
三、js页面代码如下:
// 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)
            }

        })
    }
})

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

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