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


Posted in Javascript onNovember 27, 2018

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

正文:

先上效果图:

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

index.wxml

<view class="phone_one" bindtap="clickPerson">
 <view class="phone_personal">{{firstPerson}}</view>
 <image src="../../image/v6.png" class="personal_image {{selectArea ? 'rotateRight' :''}}"></image> //三目法判断图片要不要旋转180。
 </view>
 
<view class="person_box">
 <view class="phone_select" hidden="{{selectPerson}}">
  <view bindtap="mySelect">测试1</view>
  <view bindtap="mySelect">测试2</view>
  <view bindtap="mySelect">测试3</view>
 </view>
</view>

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°旋转图片。
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript的console.log()用法小结
May 31 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
JS实现轮播图效果
Jan 11 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
js canvas实现画图、滤镜效果
Nov 27 #Javascript
js canvas画布实现高斯模糊效果
Nov 27 #Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 #Javascript
Vue数据双向绑定的深入探究
Nov 27 #Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 #Javascript
微信小程序实现日历功能
Nov 27 #Javascript
微信小程序实现打卡日历功能
Sep 21 #Javascript
You might like
PHP异常处理Exception类
2015/12/11 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
JS将unicode码转中文方法
2017/05/08 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
阿望教你用vue写扫雷小游戏
2020/01/20 Javascript
python改变日志(logging)存放位置的示例
2014/03/27 Python
Python实现保证只能运行一个脚本实例
2015/06/24 Python
python的else子句使用指南
2016/02/27 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
空字符串(“”)和null的区别
2012/11/13 面试题
高中毕业自我评价
2014/02/08 职场文书
大学生简短的自我评价分享
2014/02/20 职场文书
2014国庆节标语口号
2014/09/19 职场文书
雷锋观后感
2015/06/10 职场文书
服装店员工管理制度
2015/08/07 职场文书
学会感恩主题班会
2015/08/12 职场文书
村官2015年度工作总结
2015/10/14 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS