微信小程序实现点击图片旋转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 相关文章推荐
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
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
天津市收音机工业发展史
2021/03/04 无线电
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
php生成随机数或者字符串的代码
2008/09/05 PHP
PHP导入Excel到MySQL的方法
2011/04/23 PHP
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
JavaScript中闭包的详解
2017/04/01 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
如何教少儿学习Python编程
2020/07/10 Python
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
速比涛英国官网:Speedo英国
2019/07/15 全球购物
聚美优品广告词改编
2014/03/14 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
主持人演讲稿
2014/05/13 职场文书
学校标语大全
2014/06/19 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
营销经理工作检讨书
2014/11/03 职场文书
文明礼仪主题班会
2015/08/13 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
opencv检测动态物体的实现
2021/07/21 Python
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server