微信小程序如何实现点击图片旋转180度并且弹出下拉列表-创新互联

这篇文章将为大家详细讲解有关微信小程序如何实现点击图片旋转180度并且弹出下拉列表，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

坚守“ 做人真诚 · 做事靠谱 · 口碑至上 · 高效敬业 ”的价值观，专业网站建设服务10余年为成都成都宣传片制作小微创业公司专业提供企业网站制作营销网站建设商城网站建设手机网站建设小程序网站建设网站改版，从内容策划、视觉设计、底层架构、网页布局、功能开发迭代于一体的高端网站建设服务。

具体内容如下

正文：

先上效果图：

index.wxml

 {{firstPerson}}
  //三目法判断图片要不要旋转180。
 
 

 
  测试1
  测试2
  测试3
 

index.js

Page({
 data:{
 selectPerson:true,
 firstPerson:'个人',
 selectArea:false,
 },
 //点击选择类型
 clickPerson:function(){
 var selectPerson = this.data.selectPerson;
 if(selectPerson == true){
  this.setData({
  selectArea:true,
  selectPerson:false,
 })
 }else{
  this.setData({
  selectArea:false,
  selectPerson:true,
 })
 }
 } ,
 //点击切换
 mySelect:function(e){
 this.setData({
  firstPerson:e.target.dataset.me,
  selectPerson:true,
  selectArea:false,
 })
 },
}}

index.wxss

.phone_personal{
 width: 100%;
 color:rgb(34, 154, 181);
 height:100rpx;
 line-height:100rpx;
 text-align: center;
}
.phone_one{
 display: flex; //用flex布局更方便。
 position: relative;
 justify-content: space-between;
 background-color:rgb(239, 239, 239);
 width:90%;
 height:100rpx;
 margin:0 auto;
 border-radius: 10rpx;
 border-bottom:2rpx solid rgb(255, 255, 255);
}
.person_box{
 position: relative;
}
.phone_select{
 margin-top:0;
 z-index: 100;
 position: absolute; //小程序中z-index和absolute需要同时存在，元素才能脱离文档。
}
.select_one{
 text-align: center;
 background-color:rgb(239, 239, 239);
 width:676rpx; //脱离文档后元素width不能再用百分比。
 height:100rpx;
 line-height:100rpx;
 margin:0 5%;
 border-bottom:2rpx solid rgb(255, 255, 255);
}
.personal_image{
 z-index: 100;
 position: absolute;
 right:2.5%;
 width: 34rpx;
 height: 20rpx;
 margin:40rpx 20rpx 40rpx 0;
 transition: All 0.4s ease; 
 -webkit-transition: All 0.4s ease;
}
.rotateRight{
 transform: rotate(180deg); //180°旋转图片。
}

关于“微信小程序如何实现点击图片旋转180度并且弹出下拉列表”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

新闻标题：微信小程序如何实现点击图片旋转180度并且弹出下拉列表-创新互联
分享URL：http://shouzuofang.com/article/dgicgp.html