首页 > 小程序教程 > 微信小程序商城左侧可点菜单导航列表样式设计制作开发教程

微信小程序商城左侧可点菜单导航列表样式设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序商城左侧可点菜单导航列表样式设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="section">
    <!-- 左侧类型 -->
    <scroll-view scroll-y="true" class="left">
        <view wx:for="{{types}}" wx:key="typeId" data-type-id="{{item.id}}" bindtap="tapType" class="{{item.id == currType ? 'active' : ''}}" style="font-size:33rpx">
            {{item.name}}
        </view>
    </scroll-view>

    <!-- 右侧数据 -->
    <scroll-view scroll-y="true" class="right">
        <view class="typeTree">
            <view  class="brand" wx:for="{{typeTree}}" wx:for-item="data">
                <navigator url="../listdetail/listdetail?cat_id={{data.id}}" wx:key="typeId" class="item">
                    <image src="{{data.bz_1}}"></image>
                    <text>{{data.name}}</text>
                </navigator>
                    
            </view>
        </view>
    </scroll-view>
</view>
 
二、wxss样式文件代码如下:
.section{ position: absolute; width: 100%; height: 100% ; overflow: hidden;}
.left{ position: absolute; left: 0; top: 0; height: 100%; width: 90px; background: #F6F6F6; text-align: center;font-size:28rpx;}
.left::before{ content: ""; position: absolute; background: #dcdcdc; right: 0; top: 0; height: 100%; border-right: 1rpx solid #dcdcdc;}
.left view.active{ background: #FFF; position: relative; z-index: 2;}
.left view{ display: block; height: 60px; line-height: 60px; border-bottom: 1px solid #dcdcdc;}

.right{ margin-left: 90px; height: 100%; overflow: hidden; width: auto;background: #fff;}
.right text{ font-size: 15px}
.typeTree{ padding: 10px 20px;width: 100%}
.typeTree .item{  text-align: center; display: inline-block; vertical-align: top;margin-left:14%;}
.typeTree .brand,
.typeTree .category{ flex-wrap: wrap; overflow: hidden;display: inline-block;width: 40%}
.typeTree .title{ padding: 10px 0; display: block; color: #333;}
.typeTree image { width: 100px; margin: 0 auto;}
.typeTree .brand image{ height: 100px;}
.typeTree .category image{ height: 85px;}
.typeTree .category{ padding-bottom: 10px;}
.item text{ padding-bottom: 10px; display: block;}

三、js页面代码如下:
// import ApiList from  '../../config/api';
// import request from '../../utils/request.js';
//获取应用实例  
var app = getApp();
Page({
    data: {
        // types: null,
        typeTree: {}, // 数据缓存
        currType: 0 ,
        // 当前类型
        types: [],
        typeTree: [],
    },
        
    onLoad: function (option){
        var that = this;
        wx.request({
            url: app.d.ceshiUrl + '/Api/Category/index',
            method:'post',
            data: {},
            header: {
                'Content-Type':  'application/x-www-form-urlencoded'
            },
            success: function (res) {
                //--init data 
                var status = res.data.status;
                if(status==1) { 
                    var list = res.data.list;
                    var catList = res.data.catList;
                    var firstId= res.data.list[0].id;
                    that.setData({
                        currType:firstId,
                        types:list,
                        typeTree:catList,
                    });
                } else {
                    wx.showToast({
                        title:res.data.err,
                        duration:2000,
                    });
                }
            },
            error:function(e){
                wx.showToast({
                    title:'网络异常!',
                    duration:2000,
                });
            }
        });
    },
    tapType: function (e){
        var that = this;
        const currType = e.currentTarget.dataset.typeId;
        that.setData({
            currType: currType
        });
        console.log(currType);
        wx.request({
            url: app.d.ceshiUrl + '/Api/Category/getcat',
            method:'post',
            data: {cat_id:currType},
            header: {
                'Content-Type':  'application/x-www-form-urlencoded'
            },
            success: function (res) {
                var status = res.data.status;
                if(status==1) { 
                    var catList = res.data.catList;
                    that.setData({
                        typeTree:catList,
                    });
                } else {
                    wx.showToast({
                        title:res.data.err,
                        duration:2000,
                    });
                }
            },
            error:function(e){
                wx.showToast({
                    title:'网络异常!',
                    duration:2000,
                });
            }
        });
    },
    // 加载品牌、二级类目数据
    getTypeTree (currType) {
        const me = this, _data = me.data;
        if(!_data.typeTree[currType]){
            request({
                url: ApiList.goodsTypeTree,
                data: {typeId: +currType},
                success: function (res) {
                    _data.typeTree[currType] = res.data.data;
                    me.setData({
                        typeTree: _data.typeTree
                    });
                }
            });
        }
    }
})

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

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