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>