本文给大家带来的是微信小程序骆驼优品左侧产品分类导航栏样式设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--pages/category/category.wxml-->
<view class="container whitebg">
<view class="m-indexHd" style="height: 102rpx;">
<view class="m-hd g-row">
<view class="m-indextop">
<view class="top-line">
<view class="logo"></view>
<view class="m-searchTop">
<navigator url="../search/search" hover-class="changestyle">
<view class="zw-search-link">
<view class="icon-search"></view>
<text class="placeholder">点击输入搜索商品</text>
</view>
</navigator>
</view>
</view>
</view>
</view>
</view>
<view class="g-row categoryWrap">
<view class="cate-left">
<view class="list">
<view class="item active">
<text class="txt">户外</text>
</view>
<view class="item ">
<text class="txt">运动</text>
</view>
<view class="item ">
<text class="txt">瑜伽</text>
</view>
<view class="item ">
<text class="txt">男鞋</text>
</view>
<view class="item ">
<text class="txt">女鞋</text>
</view>
<view class="item ">
<text class="txt">童装</text>
</view>
<view class="item ">
<text class="txt">男装</text>
</view>
</view>
</view>
<view class="cate-right">
<view class="cate-bn"></view>
<view class="cate-tit">
<text class="txt">运动系列</text>
</view>
<view class="cate-wrap">
<view class="cate-list">
<view class="item">
<image src="https://img01.camel.com.cn/product_class/20170922/3ac4aaab-2af4-49ab-82a8-44f4e5d342de.png" alt=""></image>
<text>户外装备</text>
</view>
<view class="item">
<image src="https://img01.camel.com.cn/product_class/20170922/e80bf7ca-fdea-4d88-8c68-3b68150d170b.png" alt=""></image>
<text>户外服装</text>
</view>
<view class="item">
<image src="https://img01.camel.com.cn/product_class/20170922/38f8915f-da3f-4a30-98c4-3c5fa16b516f.png" alt=""></image>
<text>户外鞋靴</text>
</view>
<view class="item">
<image src="https://img01.camel.com.cn/product_class/20170922/d37612cd-a31e-43e1-a4bc-470f2c224279.png" alt=""></image>
<text>户外包袋</text>
</view>
</view>
</view>
</view>
</view>
</view>
|
二、js页面代码如下：
// pages/category/category.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
|
.jpg)
.jpg)
