快捷導(dǎo)航

小程序?qū)崿F(xiàn)分類頁

更新時(shí)間：2019年07月12日 11:08:19 作者：smile@qingqing

這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)好看的分類頁，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

分類界頁面中，左邊是一級(jí)目錄，右邊是一級(jí)目錄對應(yīng)的二級(jí)目錄，根據(jù)這個(gè)需求，我們數(shù)據(jù)設(shè)計(jì)的結(jié)構(gòu)是數(shù)組嵌套數(shù)組，第一個(gè)數(shù)組包含一級(jí)目錄數(shù)據(jù)，嵌套的數(shù)組包含的是二級(jí)目錄的數(shù)據(jù)。

主要知識(shí)：

1.定義本地json文件
2.本地文件引入
3.小程序列表渲染實(shí)現(xiàn)
4.解析本地json

定義本地的json數(shù)據(jù)源

該文件在page下面的data文件下面的categroryData.js中

//模擬json數(shù)據(jù)
 var categoryJson=[
 {
 id: 'guowei',
 name: '果味',
 isChild: true,
 children: [
 {
  child_id: 1,
  name: "果味"
 }
 ]
 },
 {
 id: 'shucai',
 name: '蔬菜',
 isChild: true,
 children: [
 {
  child_id: 1,
  name: "蔬菜"
 }
 ]
 },
 {
 id: 'chaohuo',
 name: '炒貨',
 isChild: true,
 children: [
 {
  child_id: 1,
  name: "炒貨"
 }
 ]
 },
 {
 id: 'dianxin',
 name: '點(diǎn)心',
 isChild: true,
 children: [
 {
  child_id: 1,
  name: "點(diǎn)心"
 }
 ]
 },
 {
 id: 'ganguo',
 name: '干果',
 isChild: false,
 children: []
 },
 {
 id: 'clothes',
 name: '衣服',
 isChild: false,
 children: []
 },
 {
 id: 'bag',
 name: '包包',
 isChild: false,
 children: []
 },
 {
 id: 'woman',
 name: '女鞋',
 isChild: false,
 children: []
 },
 {
 id: 'mansport',
 name: '男鞋',
 isChild: false,
 children: []
 },
 {
 id: 'sports',
 name: '運(yùn)動(dòng)鞋',
 isChild: false,
 children: []
 },
 {
 id: 'hzp',
 name: '化妝品',
 isChild: false,
 children: []
 },
 {
 id: 'life',
 name: '日常用品',
 isChild: false,
 children: []
 },
 {
 id: 'computer',
 name: '電腦',
 isChild: false,
 children: []
 },
 {
 id: 'phone',
 name: '手機(jī)',
 isChild: false,
 children: []
 }
 ]
 //導(dǎo)出數(shù)據(jù)
 module.exports={
 dataList:categoryJson
 }

顯示列表的頁面——categroy.wxml文件

<view class="main">
 <view class="categroy-left">
 <!-- 當(dāng)前項(xiàng)的id等于item項(xiàng)的id或者當(dāng)前的下標(biāo)等于item的下標(biāo)時(shí)，那個(gè)就是當(dāng)前狀態(tài)- -->
 <view wx:for="{{category}}" wx:key="index" data-id="{{item.id}}" data-index="{{index}}"
  bindtap="switchTab"
  class="cate-list {{curIndex === index?'active':''}}">{{item.name}}</view>
 </view>
 <scroll-view class="categroy-right" scroll-y="{{}}" scroll-into-view="{{toView}}" scroll-with-animation="true">
 <view wx:if="{{category[curIndex].isChild}}">
 <block wx:for="{{category[curIndex].children}}" wx:for-index wx:key="idx">
  <view id="{{item.id}}" class="cate-box">
  <view class="cate-title">
  <text>{{item.name}}</text>
  </view>
  </view>
 </block> 
 </view>
 <!-- 若無數(shù)據(jù)，則顯示暫無數(shù)據(jù) -->
 <view class='nodata' wx:else>該分類暫無數(shù)據(jù)</view>
 </scroll-view>
</view>

說明：

curIndex === index?'active':'' ，根據(jù)是否和一級(jí)目錄index相同，來判斷是否選中文字。相同執(zhí)行.cate-list.active樣式，不相同則執(zhí)行.cate-list樣式。

將本地?cái)?shù)據(jù)引入到列表中——categroy.js文件

//引入本地的json數(shù)據(jù)
var jsonData=require("../../data/categroryData.js")
Page({
 data: {
 curIndex: 0,
 toView: 'guowei'
 },
 onLoad(){
 this.setData({
 //jsonData.dataList獲取data文件中categoryData.js中定義的Json數(shù)據(jù)，并賦值給category
 category: jsonData.dataList
 })
 },
 switchTab(e){
 //將獲取到的item的id和數(shù)組的下表值設(shè)為當(dāng)前的id和下標(biāo)
 this.setData({
 toView: e.target.dataset.id,
 curIndex: e.target.dataset.index
 })
 } 
})

列表樣式——category.wxss文件

 .main{
 width:100%;
 height: 100%;
 }
 .categroy-left{
 float: left;
 width: 150rpx;
 height: 100%;
 overflow-y: auto;
 border-right: 1px solid #ddd;
 box-sizing: border-box;
 }
 .categroy-left .cate-list{
 height: 90rpx;
 line-height: 90rpx;
 text-align: center;
 border-left: 3px solid #fff;
 }
 .categroy-left .cate-list.active{
 color: #AB956D;
 border-color: #AB956D;
 }
 .categroy-right{
 float: right;
 width: 600rpx;
 height: 100%;
 }
 .cate-box{
 height: 100%;
 padding:40rpx;
 box-sizing: border-box;
 }
 .cate-title{
 position: relative;
 height: 30rpx;
 line-height: 30rpx;
 padding:30rpx 0 55rpx;
 text-align: center;
 color: #AB956D;
 font-size: 28rpx;
 }
 .cate-title::before{
 position: absolute;
 left: 130rpx;
 top: 43rpx;
 content: '';
 width: 70rpx;
 height: 4rpx;
 background: #AB956D;
 }
 .cate-title::after{
 position: absolute;
 right: 130rpx;
 top: 43rpx;
 content: '';
 width: 70rpx;
 height: 4rpx;
 background: #AB956D;
 }
 
 .nodata{
 font-size: 14px;
 text-align: center;
 color: #AB956D;
 margin-top: 100px;
 }

效果圖