获取点击的数据，小程序，data-value

本文主要是介绍获取点击的数据，小程序，data-value，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

.wxml代码      备注：标颜色部分是“获取点击数据的代码”，其他部分是侧边栏的功能

<view class="page">   <!-- 侧边栏内容 -->   <view class="page-slidebar">     <view class="page-content">         <input class="wc" type="text" wx:for="{{array}}" wx:key="index" value="{{array[index]}}"          data-value="{{array[index]}}" bindtap="cebian" />         <!-- <input type="text" wx:fo9r="{{array}}" wx:key="index" wx:for-item="item" value="{{item}}" /> -->     </view>   </view>   <view bindtouchmove="tap_drag" bindtouchend="tap_end" bindtouchstart="tap_start" class="page-top {{open ? ['c-state','cover'] : ''}} ">     <view class='content' class="mainInput">        <input type="text" bindtap="tap_ch" value="{{temp}}" placeholder="点击弹出侧边框" />     </view>   </view> </view>   .wxss代码 /* 全局样式 */ page, .page {   height: 100%;   font-family: 'PingFang SC',          'Helvetica Neue',          Helvetica,          'Droid Sans Fallback',          'Microsoft Yachei',          sans-serif; }  /* 侧边栏样式 */ .page-slidebar {   height: 100%;   width: 750rpx;   position: fixed;   /* 控制侧边栏在右面 */   right: 0;           background-color:white;   z-index: 0; }   /* 控制侧边栏的内容距离顶部的距离 */ .page-content {   padding-top: 60rpx;   /* 控制侧边栏在右面 */   position: absolute;   right: 0;
}   /* 侧边栏内容的 css 样式 */ .wc {   color:black;   padding: 30rpx 0 30rpx 150rpx;   border-bottom: 1px solid #eee;  }   /* 当屏幕向左滑动出现侧边栏的时候主页的动画样式 */ /* scale：取值范围 0~1 表示屏幕大小是原来的百分之几可以自己修改成 0.8 试下*/ /* translate(60%,0%) 表示向左滑动的时候侧边栏占用平时的宽度为 60%  */ .c-state {   transform: rotate(0deg) scale(1) translate(60%, 0%);   -webkit-transform: rotate(0deg) scale(1) translate(-60%, 0%); }   /* 主页样式 */ .page-top {   height: 100%;   position: fixed;   width: 750rpx;   background-color:white;   z-index: 0;   transition: All 0.4s ease;   -webkit-transition: All 0.4s ease; }
/* 遮盖层样式 */ .cover{   width: 100%;   height: 100%;   background-color:gray;   opacity: 0.5;   z-index: 9000; }   .content{   margin-top: 100rpx;  } .mainInput{   color:black;   padding: 30rpx 0 30rpx 150rpx;   border: 2px solid gray;    width: 500rpx; }   .js代码 Page({    data: {     open: false,     // mark 是指原点x轴坐标     mark: 0,     array:["李知恩","霍建华","杨幂","迪丽热巴","古力娜扎"],     // newmark 是指移动的最新点的x轴坐标      newmark: 0,     istoright: true,     temp:""   },    // 点击左上角小图标事件   tap_ch: function(e) {     if (this.data.open) {       this.setData({         open: false       });     } else {       this.setData({         open: true       });     }   },     tap_start: function(e) {     // touchstart事件     // 把手指触摸屏幕的那一个点的 x 轴坐标赋值给 mark 和 newmark     this.data.mark = this.data.newmark = e.touches[0].pageX;   },     tap_drag: function(e) {     // touchmove事件     this.data.newmark = e.touches[0].pageX;          // 手指从左向右移动     if (this.data.mark < this.data.newmark) {       this.istoright = true;     }          // 手指从右向左移动     if (this.data.mark > this.data.newmark) {       this.istoright = false;     }     this.data.mark = this.data.newmark;   },     tap_end: function(e) {     // touchend事件     this.data.mark = 0;     this.data.newmark = 0;     // 通过改变 opne 的值让主页加上滑动的样式     if (this.istoright) {       this.setData({         open: true       });     } else {       this.setData({         open: false       });     }   },   cebian:function(e){     // e.currentTarget.dataset.value  获取当前点击的数据     console.log("value:", e.currentTarget.dataset.value);     var value=e.currentTarget.dataset.value;     var key = this.data.array.indexOf(value);     this.setData({       open:false,       temp:value     })   }
})

这篇关于获取点击的数据，小程序，data-value的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！