微信小程序实现点击图片旋转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 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
jQuery 第二课 操作包装集元素代码
Mar 14 Javascript
工作需要写的一个js拖拽组件
Jul 28 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
浅析Bootstrap验证控件的使用
Jun 23 Javascript
require、backbone等重构手机图片查看器
Nov 17 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
浅析vue深复制
Jan 29 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
基于jquery实现左右上下移动效果
May 02 jQuery
vue使用vant中的checkbox实现全选功能
Nov 17 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面向对象程序设计方法实例详解
2016/12/24 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
javascript基础知识
2016/06/07 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
若干个Java基础面试题
2015/05/19 面试题
宿舍违规用电检讨书
2014/02/16 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
新春联欢会主持词
2014/03/24 职场文书
端午节活动总结
2014/08/26 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
2015年科协工作总结
2015/05/19 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
天河观后感
2015/06/11 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
2016年母亲节广告语
2016/01/28 职场文书
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB
在python中读取和写入CSV文件详情
2022/06/28 Python