微信小程序实现通过js操作wxml的wxss属性示例


Posted in Javascript onDecember 06, 2018

本文实例讲述了微信小程序实现通过js操作wxml的wxss属性。分享给大家供大家参考,具体如下:

微信小程序如何通过js操作html的css属性:

在web端、手机端、webApp中可以通过js获取dom的方式设置dom属性。

微信小程序中,不能通过这种方式进行操作。

如何在微信小程序中在wxml中操作wxss的属性。

实现思路:

通过利用数据绑定实现动态改变样式,

1、在wxxml标签内嵌css属性上绑定js的date值

2、通过js中绑定css属性的date值改变wxml标签内嵌的css属性

实现效果:点击所在地区,弹出选择地区的浮层

微信小程序实现通过js操作wxml的wxss属性示例

实现代码:

editAddress.wxml:

<view class='top'>
 <image bindtap='goBack' class='leftdection' src='../../../../images/leftdection02.png'></image>
 <text>我的反馈</text>
 <text class='righttag' bindtap='sendfeedback'>保存</text>
</view>
<view class='dialogWrap' style='display:{{isShowSelectAddress}}'>
 <view class='selectaddress' >选择地区</view>
</view>
<view class='item'>
 <view style='color:#000;margin-top:10px;margin-left:10px'>收货人 :</view>
 <input class='inputclass' placeholder="收货人" auto-focus/>
</view>
<view class='item'>
 <view style='color:#000;margin-top:10px;margin-left:10px'>联系方式 :</view>
 <input class='inputclass' placeholder="联系方式" />
</view>
<view class='item' bindtap='showselectregion'>
 <view style='color:#000;margin-top:10px;margin-left:10px'>所在地区 :</view>
 <text style='margin-top:10px'>gdgdfgdf</text>
 <image class='rightdirectionclass' src='../../../../images/leftdirection.png' ></image>
</view>
<view class='item'>
 <view style='color:#000;margin-top:10px;margin-left:10px'>详细地址 :</view>
 <input class='inputclass' placeholder="详细地址" />
</view>
<view class='item'>
 <view style='color:#000;margin-top:10px;margin-left:10px'>标签 :</view>
 <view class='addresstag' >家</view>
 <view class='addresstag'>公司</view>
 <view class='addresstag'>学校</view>
 <view class='addresstag'>其他</view>
</view>

editAddress.wxss:

page{
 width: 100%;height: 100%;position:relative
}
.leftdection{
 width: 20px;height: 20px;position:absolute;left: 0;
 margin-top: 5px;margin-left: 20px;
}
.righttag{
 position:absolute;
 right: 0;
 margin-right: 10px;
 color: red;
}
.item{
 width: 100%;height: 50px;background: #fff;
 display: flex;flex-direction: row;
 border-bottom: 1px solid #000
}
.inputclass{
 width: 220px;height: 25px;border: 0px solid #000;
 margin-top: 10px
}
.addresstag{
 width:25px;height:25px;border: 1px solid #000;padding-left:8px;
 padding-top: 10px;font-size: 10px;margin-top: 10px;margin-left: 10px
}
.dialogWrap{
 position: absolute;
 width: 100%;height: 94%;background: rgba(0, 0, 0, 0.1);
}
.selectaddress{
 position: absolute;bottom: 0;
 width: 100%;background: rgba(0, 0, 0, 0.3);
 height: 240px;
}
.rightdirectionclass{
 width: 25px;height: 25px;position: absolute;right: 20px;
 margin-top: 10px;
}

editAddress.js:

Page({
 /**
  * 页面的初始数据
  */
 data: {
  isShowSelectAddress:"none"
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  wx.setNavigationBarTitle({
   title: '编辑地址'
  });
 },
 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {
 },
 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {
 },
 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {
 },
 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {
 },
 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {
 },
 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {
 },
 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {
 },
 goBack:function(){
  wx.navigateBack({
  });
 },
 showselectregion:function(){
  this.setData({
   isShowSelectAddress:"block"
  })
 }
})

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
用jQuery扩展自写的 UI导航
Jan 13 Javascript
一个简单的js鼠标划过切换效果
Jun 30 Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
js实现3D图片环展示效果
Mar 09 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 Javascript
Element Alert警告的具体使用方法
Jul 27 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 #Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 #Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 #Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 #Javascript
JavaScript中引用vs复制示例详析
Dec 06 #Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 #jQuery
express+vue+mongodb+session 实现注册登录功能
Dec 06 #Javascript
You might like
PHP浮点数的一个常见问题
2016/03/10 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
js中eval详解
2012/03/30 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
快速了解Node中的Stream流是什么
2019/02/13 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
jQuery实现电梯导航模块
2020/12/22 jQuery
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
关于反爬虫的一些简单总结
2017/12/13 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
详解Python3注释知识点
2019/02/19 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
html中两种获取标签内的值的方法
2022/06/16 jQuery
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers