界面效果如下
代码
js
// pages/fenlei/fenlei.js
Page({
data: {
active:0,
currentTab:0,
list:[]
},
onLoad(){
wx.cloud.database().collection('med')
.where({//条件查询
class: '感冒'
})
.get()
.then(res=>{
console.log('请求成功',res)
this.setData({
list:res.data
})
})
.catch(err=>{console.log('第二种方法请求失败',err)
})
},
switchNav: function (e) {
var page = this;
var id = e.target.id;
//console.log(id)
if (this.data.currentTab == id) {
return false;
} else {
page.setData({
currentTab: id
});
}
page.setData({
active: id
});
if(id=="0"){
//console.log(id)
wx.cloud.database().collection('med')
.where({//条件查询
class: '感冒'
})
.get()
.then(res=>{
console.log('请求成功',res)
this.setData({
list:res.data
})
})
.catch(err=>{console.log('第二种方法请求失败',err)
})
}else if(id=="1"){
wx.cloud.database().collection('med')
.where({//条件查询
class: '咳嗽'
})
.get()
.then(res=>{
this.setData({
list:res.data
})
})
.catch(err=>{console.log('第二种方法请求失败',err)
})
}else if(id=="2"){
wx.cloud.database().collection('med')
.where({//条件查询
class: '肠胃'
})
.get()
.then(res=>{
this.setData({
list:res.data
})
})
.catch(err=>{console.log('第二种方法请求失败',err)
})
}else if(id=="3"){
wx.cloud.database().collection('med')
.where({//条件查询
class: '儿科'
})
.get()
.then(res=>{
this.setData({
list:res.data
})
})
.catch(err=>{console.log('第二种方法请求失败',err)
})
}else if(id=="4"){
wx.cloud.database().collection('med')
.where({//条件查询
class: '妇科'
})
.get()
.then(res=>{
this.setData({
list:res.data
})
})
.catch(err=>{console.log('第二种方法请求失败',err)
})
}else if(id=="5"){
wx.cloud.database().collection('med')
.where({//条件查询
class: '五官'
})
.get()
.then(res=>{
this.setData({
list:res.data
})
})
.catch(err=>{console.log('第二种方法请求失败',err)
})
}else{
wx.cloud.database().collection('med')
.where({//条件查询
class: '肝胆'
})
.get()
.then(res=>{
this.setData({
list:res.data
})
})
.catch(err=>{console.log('第二种方法请求失败',err)
})
}
},
// 跳转到搜索页面
search: function () {
wx.navigateTo({
url: '../search/search'
})
},
onChange(event) {
this.setData({
activeKey:event.detail
})
this.getgood(this.data.activeKey)
console.log("activeKey",this.data.activeKey);
},
});
wxml
<!--pages/fenlei/fenlei.wxml-->
<view class="weui-search-bar" bindtap="suo">
<view class="weui-search-bar__form">
<!-- 搜索框 -->
<view class="weui-search-bar__box">
<icon class="weui-icon-search_in-box" type="search" size="16"></icon>
<input type="text" class="weui-search-bar__input" disabled placeholder="请输入搜索内容" bindtap="search"/>
</view>
</view>
<!-- 搜索按钮,调用搜索查询方法 -->
</view>
<view class='productNav'>
<!-- 左侧 -->
<view class='left'>
<view class="{{active==0?'selected':'normal'}}" id="0" bindtap='switchNav'>感冒 </view>
<view class="{{active==1?'selected':'normal'}}" id="1" bindtap='switchNav'>咳嗽</view>
<view class="{{active==2?'selected':'normal'}}" id="2" bindtap='switchNav'>肠胃</view>
<view class="{{active==3?'selected':'normal'}}" id="3" bindtap='switchNav'>儿科</view>
<view class="{{active==4?'selected':'normal'}}" id="4" bindtap='switchNav'>妇科</view>
<view class="{{active==5?'selected':'normal'}}" id="5" bindtap='switchNav'>五官</view>
<view class="{{active==6?'selected':'normal'}}" id="6" bindtap='switchNav'>肝胆</view>
</view>
<!-- 右侧 -->
<view class='right'>
<view class='type'>
<view class="list" wx:for="{{list}}">
<view style="display:flex">
<image class="img" src="{{item.img}}"></image>
<view class="txt">{{item.namem}}</view>
</view>
</view>
</view>
</view>
</view>
wxss
/* pages/fenlei/fenlei.wxss */
.weui-search-bar {
position: relative;
padding: 8px 10px;
display: -webkit-box;
display: -webkit-flex;
display: flex;
box-sizing: border-box;
background-color: #EFEFF4;
border-top: 1rpx solid #D7D6DC;
border-bottom: 1rpx solid #D7D6DC;
}
.weui-icon-search_in-box {
position: absolute;
left: 10px;
top: 7px;
}
.weui-search-bar__form {
position: relative;
-webkit-box-flex: 1;
-webkit-flex: auto;
flex: auto;
border-radius: 5px;
background: #FFFFFF;
border: 1rpx solid #E6E6EA;
}
.weui-search-bar__box {
position: relative;
padding-left: 30px;
padding-right: 30px;
width: 100%;
box-sizing: border-box;
z-index: 1;
}
.weui-search-bar__input {
height: 28px;
line-height: 28px;
font-size: 14px;
}
.productNav{
display: flex;
flex-direction: row;
font-family: "Microsoft YaHei"
}
.left{
width: 25%;
font-size: 36rpx;
background-color: #f4f4f4;
}
.left view{
text-align: center;
height: 140rpx;
line-height: 90rpx;
}
.selected{
background-color: rgb(221, 227, 235);
border-left: 2px solid #2e3fa0;
font-weight: bold;
color: #3d46ca;
}
.normal{
background-color: #f4f4f4;
border-bottom: 1px solid #f2f2f2;
}
.right{
width:75%;
margin: 0;
}
.right .type .list{
height:78px;
border-bottom: 3rpx solid #c4c5c5;
padding-top: 10px;
padding-left: 4px;
padding-bottom: 1px;
background-color: rgb(221, 227, 235);
}
.right .type .list .img{
width:200rpx;
height: 160rpx;
}
.right .type .list .txt{
margin-left: 8px;
}
