欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

微信小程序?qū)崿F(xiàn)點擊圖片旋轉(zhuǎn)180度并且彈出下拉列表 - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價值，我們在追求其視覺表現(xiàn)的同時，更側(cè)重于功能的便捷，營銷的便利，運營的高效，讓網(wǎng)站成為營銷工具，讓軟件能切實提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序為后期升級提供便捷的支持！

您當前位置>首頁 » 新聞資訊 » 小程序相關(guān) >

微信小程序?qū)崿F(xiàn)點擊圖片旋轉(zhuǎn)180度并且彈出下拉列表

發(fā)表時間：2021-4-30

發(fā)布人：葵宇科技

瀏覽次數(shù)：128


//index.wxml

  1. <view class="phone_one" bindtap="clickPerson">  
  2.  <view class="phone_personal">{{firstPerson}}</view>  
  3.  <image src="../../image/v6.png" class="personal_image {{selectArea ? 'rotateRight' :''}}"></image> //三目法判斷圖片要不要旋轉(zhuǎn)180。  
  4.  </view>  
  6. <view class="person_box">  
  7.   <view class="phone_select" hidden="{{selectPerson}}">  
  8.     <view bindtap="mySelect">測試1</view>  
  9.     <view bindtap="mySelect">測試2</view>  
  10.     <view bindtap="mySelect">測試3</view>  
  11.   </view>  
  12. </view>

//index.js

  1. <pre name="code" class="html">Page({  
  2.  data:{  
  3.   selectPerson:true,  
  4.   firstPerson:'個人',  
  5.   selectArea:false,  
  6.   },  
  7.  //點擊選擇類型  
  8.  clickPerson:function(){  
  9.   var selectPerson = this.data.selectPerson;  
  10.   if(selectPerson == true){  
  11.    this.setData({  
  12.    selectArea:true,  
  13.    selectPerson:false,  
  14.  })  
  15.   }else{  
  16.    this.setData({  
  17.    selectArea:false,  
  18.    selectPerson:true,  
  19.  })  
  20.   }  
  21.  } ,  
  22.  //點擊切換  
  23.  mySelect:function(e){  
  24.   this.setData({  
  25.    firstPerson:e.target.dataset.me,  
  26.    selectPerson:true,  
  27.    selectArea:false,  
  28.   })  
  29.  },  
  30. }}</pre><pre name="code" class="html"></pre>//index.wxss  
  31. [html] view plain copy
  32. <pre name="code" class="html">.phone_personal{  
  33.   width: 100%;  
  34.   color:rgb(34, 154, 181);  
  35.   height:100rpx;  
  36.   line-height:100rpx;  
  37.   text-align: center;  
  38. }  
  39. .phone_one{  
  40.   display: flex; //用flex布局更方便。  
  41.   position: relative;  
  42.   justify-content: space-between;  
  43.   background-color:rgb(239, 239, 239);  
  44.   width:90%;  
  45.   height:100rpx;  
  46.   margin:0 auto;  
  47.   border-radius: 10rpx;  
  48.   border-bottom:2rpx solid rgb(255, 255, 255);  
  49. }  
  50. .person_box{  
  51.   position: relative;  
  52. }  
  53. .phone_select{  
  54.   margin-top:0;  
  55.   z-index: 100;  
  56.   position: absolute; //小程序中z-index和absolute需要同時存在，元素才能脫離文檔。  
  57. }  
  58. .select_one{  
  59.   text-align: center;  
  60.   background-color:rgb(239, 239, 239);  
  61.   width:676rpx;  //脫離文檔后元素width不能再用百分比。  
  62.   height:100rpx;  
  63.   line-height:100rpx;  
  64.   margin:0 5%;  
  65.   border-bottom:2rpx solid rgb(255, 255, 255);  
  66. }  
  67. .personal_image{  
  68.   z-index: 100;  
  69.   position: absolute;  
  70.   right:2.5%;  
  71.   width: 34rpx;  
  72.   height: 20rpx;  
  73.   margin:40rpx 20rpx 40rpx 0;  
  74.   transition: All 0.4s ease;   
  75.   -webkit-transition: All 0.4s ease;  
  76. }  
  77. .rotateRight{  
  78.   transform: rotate(180deg); //180°旋轉(zhuǎn)圖片。  
  79. }</pre>  
  80. <p></p><pre name="code" class="html" style="font-size: 13.3333px;"></pre><p></p>  
  81. <pre></pre>

相關(guān)案例查看更多