CN108536442A - 一种基于微信小程序平台左右结构层级展示及快速加载的药品分类方法 - Google Patents

Abstract

本发明涉及微信小程序平台技术领域，特别涉及一种基于微信小程序平台左右结构层级展示的药品分类。本发明的方法是在用户进入左右结构的分类页面时立即通过httpGet方法读取远程服务器上的别数据，并把其缓存到本地中，如果用户再次进入时，只需要读取本地缓存数据即可。缓存后把获得的父类数据绑定到左边的view上并进行遍历，并给左侧的子view绑定changeRightTab事件；然后在changeRightTab方法实现根据左侧点击的索引及id来获得子分类数据，并把其绑定到右侧View，从而实现简洁、快速地分类展示。本发明解决了在微信小程序里药品分类展示缓慢及零乱的问题。

Description

一种基于微信小程序平台左右结构层级展示及快速加载的药 品分类方法

技术领域

本发明涉及微信小程序平台技术领域，特别涉及一种基于微信小程序平台左右结构层级展示及快速加载的药品分类方法。

背景技术

在微信小程序平台上访问某些药品小程序时，没有那种简洁、细致及全面的分类展示页面；为了解决这些问题，需要实现一种左右结构层级展示的药品分类方法来方便客户浏览。

发明内容

本发明解决的技术问题在于提供一种基于微信小程序平台左右结构层级展示及快速加载药品的分类方法；解决了在微信小程序里药品分类展示零乱及加载缓慢的问题。

本发明解决上述技术问题的技术方案是：

在项目里创建一个classify包及4个文件，分别为classify.js、classify.json、classify.wxml、classify.wxss; 然后在classify.wxml文件里绘制出药品分类的界面，为左右结构，左边view为主目录，右边view为明细，在classify.wxss文件里调节样式; 接着在classify.js中的data时定义parentDisplay、childDisplay是否显示变量，navLeftItems、curRightItems类别列表变量及curNav、curIndex索引变量；在classify.js文件中的onload方法里通过httpGet方法读取远程服务器上的类别数据，如加载成功，给上面的变量设置不同状态的值。把获得的值绑定到classify.wxml文件中的左右view上并进行遍历，给左侧的子view绑定事件changeRightTab；最后实现changeRightTab方法，根据左侧点击的索引及id来展示右侧不同的药品子类别信息；从而解决了在微信小程序里药品分类展示零乱及加载缓慢的问题。

所述的方法具体包括如下步骤：

步骤一、在项目里创建一个classify包及4个文件，分别为classify.js、classify.json、classify.wxml、classify.wxss；

步骤二、在classify.wxml文件里绘制出药品分类的界面，为左右结构，左边view为主目录，右边view为明细，在classify.wxss文件里调节样式；

步骤三、在classify.js中的data时定义parentDisplay、childDisplay是否显示变量，navLeftItems、curRightItems类别列表变量及curNav、curIndex索引变量；

步骤四、在classify.js文件中的onload方法里通过httpGet方法读取远程服务器上的类别数据，如加载成功，把数据缓存到本地，并把值赋给上面的变量。如果用户再次进入，直接读取缓存数据；

步骤五、给classify.wxml文件中的左view绑定navLeftItems并进行遍历，并同时绑定事件changeRightTab；

步骤六、实现changeRightTab方法，根据左侧点击的索引及id来展示右侧不同的药品子类别信息。

本发明的有益效果：在项目里创建一个classify包及4个文件，分别为classify.js、classify.json、classify.wxml、classify.wxss; 然后在classify.wxml文件里绘制出药品分类的界面，为左右结构，左边view为主目录，右边view为明细，在classify.wxss文件里调节样式; 接着在classify.js中的data时定义parentDisplay、childDisplay是否显示变量，navLeftItems、curRightItems类别列表变量及curNav、curIndex索引变量；在classify.js文件中的onload方法里通过httpGet方法读取远程服务器上的类别数据，如加载成功，给上面的变量设置不同状态的值。把获得的值绑定到classify.wxml文件中的左右view上并进行遍历，给左侧的子view绑定事件changeRightTab；最后实现changeRightTab方法，根据左侧点击的索引及id来展示右侧不同的药品子类别信息，从而达到简洁、细致、全面快速地在小程序中把药品分类展示的目的。有效解决了在微信小程序里药品分类展示零乱及加载缓慢的问题。

附图说明

下面结合附图对本发明进一步说明：

图1为本发明的流程图。

图2为本发明的展示图。

具体实施方式

如图1所示，本发明采用如下步骤：

步骤一、在项目里创建一个classify包及4个文件，分别为classify.js、classify.json、classify.wxml、classify.wxss；

步骤二、在classify.wxml文件里绘制出药品分类的界面，为左右结构，左边view为主目录，右边view为明细，在classify.wxss文件里调节样式；如：

<view class="nav_left" style="display:{{parentDisplay}}">

</view>

<view class="nav_right" style="display:{{childDisplay}}">

</view>

步骤三、在classify.js中的data时定义parentDisplay、childDisplay是否显示变量，navLeftItems、curRightItems类别列表变量及curNav、curIndex索引变量：

data: {

parentDisplay:'',

childDisplay:'',

navLeftItems: [],

curNav: 1,

curIndex: 0,

curRightItems:[]

},

步骤四、在classify.js文件中的onload方法里通过httpGet方法读取远程服务器上的类别数据，如加载成功，把数据缓存到本地，并把值赋给上面的变量。如果用户再次进入，直接读取缓存数据；如：

onLoad: function (options) {

this.setData({ options: options })

this.listCategory();

},

/**加载购物车数据，计算数量*/

listCategory: function () {

var categories = ws.getStoreage(“categories”);

if(categories && categories.length > 0){

//设置变量……

}else{

var that = this;

httpUtil.httpGet(api.getCategoryUrl, { }, function (res) {

var datas = res.data;

if (datas.length > 0) {

wx.setStorage({“categories”}, datas);

that.setData({

parentDisplay: '',

childDisplay: '',

navLeftItems: datas,

curRightItems: datas[0].ProductCategoryChildList

})

} else {

that.setData({

parentDisplay: 'none',

childDisplay: 'none',

emptyDisplay: ''

})

}

}

});

步骤五、给classify.wxml文件中的左view绑定navLeftItems并进行遍历，并同时绑定事件changeRightTab；如：

<view class="nav_left" style="display:{{parentDisplay}}">

<block wx:for="{{navLeftItems}}" wx:key="{{index}}">

<view class="nav_left_items {{curNav == item.ProductCategoryID 'active' : ''}}" bindtap="changeRightTab" data-index="{{index}}" data-id="{{item.ProductCategoryID}}">{{item.CategoryName}}</view>

</block>

</view>

<view class="nav_right" style="display:{{childDisplay}}">

<block wx:for="{{curRightItems}}" wx:key="{{index}}">

<view class="nav_right_items">

<navigator url="../search/search ProductCategoryID={{item.ProductCategoryID}}">

<view> <text>{{item.CategoryName}}</text> </view>

</navigator>

</view>

</block>

</view>

</view>

步骤六、实现changeRightTab方法，根据左侧点击的索引及id来展示右侧不同的药品子类别信息。如：

changeRightTab: function (e) {

var id = e.target.dataset.id;

var index = parseInt(e.target.dataset.index);

this.setData({

curNav: id,

curIndex: index,

curRightItems: this.data.navLeftItems[index].ProductCategoryChildList

})

}。

Claims (2)

1.一种基于微信小程序平台左右结构层级展示及快速加载的药品分类方法，其特征在于：首先在项目里创建一个classify包及4个文件，分别为classify.js、classify.json、classify.wxml、classify.wxss, 并在classify.wxml文件里绘制出左右结构的药品分类的界面，左边view为主目录，右边view为明细；当用户进入分类页面时立即通过httpGet方法读取远程服务器上的别数据，并把其缓存到本地中，如果用户再次进入时，只需要读取本地缓存数据即可；缓存后把获得的父类数据绑定到左边的view上并进行遍历，并给左侧的子view绑定changeRightTab事件；然后在changeRightTab方法实现根据左侧点击的索引及id来获得子分类数据，并把其绑定到右侧View，实现简洁、快速地分类展示；从而解决了在微信小程序里药品分类展示零乱及加载缓慢的问题。

2.根据权利要求1所述的解决了在微信小程序里药品分类展示零乱及加载缓慢的方法，其特征在于：所述的方法具体包括如下步骤：

步骤一、在项目里创建一个classify包及4个文件，分别为classify.js、classify.json、classify.wxml、classify.wxss；

步骤二、在classify.wxml文件里绘制出药品分类的界面，为左右结构，左边view为主目录，右边view为明细，在classify.wxss文件里调节样式；

步骤三、在classify.js中的data时定义parentDisplay、childDisplay是否显示变量，navLeftItems、curRightItems类别列表变量及curNav、curIndex索引变量；

步骤四、在classify.js文件中的onload方法里通过httpGet方法读取远程服务器上的类别数据，如加载成功，把数据缓存到本地，并把值赋给上面的变量；如果用户再次进入，直接读取缓存数据；

步骤五、给classify.wxml文件中的左view绑定navLeftItems并进行遍历，并同时绑定事件changeRightTab；

步骤六、实现changeRightTab方法，根据左侧点击的索引及id来展示右侧不同的药品子类别信息。