微信小程序实现点击图片旋转180度并且弹出下拉列表

本文为大家分享了微信小程序实现图片旋转、下拉列表的具体代码，供大家参考，具体内容如下

正文：

先上效果图：

index.wxml

view class=' phone _ one ' bind tap=' click person ' view class=' phone _ personal ' {第一人称} }/view image src=' http :/./image/V6。png ' class=' personal _ image { { selectArea？rotateRight' :''}}'/image //三目法判断图片要不要旋转180。/view view class=' person _ box ' view class=' phone _ select ' hidden=' { { select person } } ' view bind tap=' my select '测试1/view view bindtap='mySelect '测试2/view view bindtap='mySelect '测试3/view /view/viewindex.js

页面({ data : { select person : true，firstPerson: '个人，selectArea:false，}，//点击选择类型单击人员：功能(){ var selectPerson=this。数据。选择人员；if(select person==true){ this。setdata({ selectrea : true，selectPerson:false，})else { this。setdata({ selectrea : false，selectPerson:true，}) }，//点击切换我的选择：功能(e){这。setdata({第一人称目标。数据集。me，selectPerson:true，selectArea:false，}) }，}}index.wxss。phone _ personal { width : 100%；color:rgb(34，154，181)；高度：100rpx线高高度：100rpx文本对齐：中心；}.phone _ one { display: flex//用弯曲布局更方便相对位置：正义-内容：空格；背景-color:rgb(239，239，239)；宽度：90%;高度：100rpxmargin:0自动订单-半径： 10 rpx边框-底部：2rpx实心rgb(255，255，255)；}.person_box{ position:相对；}.phone _ select { margin-top :0；z指数： 100；绝对位置：//小程序中z指数和绝对的需要同时存在，元素才能脱离文档。}.select _ one { text-align : center；背景-color:rgb(239，239，239)；宽度宽度：676rpx/脱离文档后元素宽度不能再用百分比高度：100rpx .线高高度：100rpx保证金：0 5%;边框-底部：2rpx实心rgb(255，255，255)；}.personal _ image { z-index : 100；绝对位置：右：2.5%;宽度： 34 rpxheight : 20 rpxmargin :40 rpx 20 rpx 40 rpx 0；过渡：所有0.4秒轻松；-WebKit-transit :所有0.4s轻松版；}.rotateRight { transform:旋转(180度);//180 旋转图片。}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。