1.需求:
点击左边的科室选择,出现对应的科室二级菜单。并且图片样式切换为当前点击状态。
2.问题:
小程序的背景图需要用在线图片,所以我这里用的是<image>不是背景图。因此图片的状态切换不能用hover
以下为js
Page({
data: {
keshi:[
{imgUrl:"../../images/leftbar_body.png",keshiname:"内科",idName:"neike",clickUrl:"../../images/leftbar_body_pre.png"},
{imgUrl:"../../images/leftbar_body.png",keshiname:"外科",idName:"waike",clickUrl:"../../images/leftbar_body_pre.png"},
{imgUrl:"../../images/leftbar_head.png",keshiname:"妇产科",idName:"fcke",clickUrl:"../../images/leftbar_head_pre.png"},
{imgUrl:"../../images/leftbar_body.png",keshiname:"男科",idName:"nanke",clickUrl:"../../images/leftbar_body_pre.png"},
{imgUrl:"../../images/leftbar_head.png",keshiname:"儿科",idName:"erke",clickUrl:"../../images/leftbar_head_pre.png"},
{imgUrl:"../../images/leftbar_body.png",keshiname:"皮肤科",idName:"pifuke",clickUrl:"../../images/leftbar_body_pre.png"}
],
waike:["普通外科","神经外科","心胸外科","泌尿外科","心血管外科","乳腺外科","肝胆外科","器官移植","肛肠外科","烧伤科","骨伤科"],
neike:["普通内科","内科2","内科3","内科4","内科5","内科6","内科7","内科8","内科9","内科10","内科11"],
fcke:["妇产科1","妇产科2","妇产科3","妇产科4","妇产科5","妇产科6","妇产科7","妇产科8","妇产科9","妇产科10","内科11"],
nanke:["男科1","男科2","男科3","男科4","男科5","男科6","男科7","男科8","男科9","男科10","男11"],
erke:["儿科1","儿科2","儿科3","儿科4","儿科5","儿科6","儿科7","儿科8","儿科9","儿科10","儿11"],
pifuke:["皮肤科1","皮肤科2","皮肤科3","皮肤科4","皮肤科5","皮肤科6","皮肤科7","皮肤科8","皮肤科9","皮肤科10","男11"],
flag:"waike",
imgindex:"1"
},
// 选择科室
select:function(e){
this.setData({
flag:e.currentTarget.id,
//这里的imgindex也就是科室菜单的index
imgindex:e.currentTarget.dataset.index
});
}
})
以下为wxml
<!--pages/officeSelect/index.wxml-->
<view class="main">
<!--左边的科室选择栏-->
<view class="left leftbar">
<!-- 在js data中定义了keshi 用来循环放置-->
<block wx:for="{{keshi}}">
<!-- 给每个科室加id名 以及传送一个index 绑定点击选择事件 -->
<view class="item" id="{{item.idName}}" data-index="{{index}}" bindtap="select">
<!-- 点击后获取当点击的index并赋值给imgindex 让对应的index图片显示 -->
<!-- imgindex==index为点击了 让当前图片显示为点击状态clickUrl 否则显示为imgUrl -->
<image src="{{item.clickUrl}}" wx:if="{{imgindex==index}}" class="img"></image>
<image src="{{item.imgUrl}}" wx:elif="{{imgindex!=index}}" class="img"></image>
<text>{{item.keshiname}}</text>
</view>
</block>
</view>
<!-- 当点击某个科室 就给flag赋值为科室名 判断flag为对应的科室名时就显示对应的二级菜单 -->
<view class="left rightbar" wx:if="{{flag=='waike'}}" >
<block wx:for="{{waike}}">
<text>{{item}}</text>
</block>
</view>
<view class="left rightbar" wx:if="{{flag=='neike'}}">
<block wx:for="{{neike}}">
<text>{{item}}</text>
</block>
</view>
<view class="left rightbar" wx:if="{{flag=='fcke'}}">
<block wx:for="{{fcke}}">
<text>{{item}}</text>
</block>
</view>
<view class="left rightbar" wx:if="{{flag=='nanke'}}">
<block wx:for="{{nanke}}">
<text>{{item}}</text>
</block>
</view>
<view class="left rightbar" wx:if="{{flag=='erke'}}">
<block wx:for="{{erke}}">
<text>{{item}}</text>
</block>
</view>
<view class="left rightbar" wx:if="{{flag=='pifuke'}}">
<block wx:for="{{pifuke}}">
<text>{{item}}</text>
</block>
</view>
</view>