微信小程序实现通过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 相关文章推荐
Jquery Select操作方法集合脚本之家特别版
May 17 Javascript
JavaScript 注册事件代码
Jan 27 Javascript
使用jquery实现select添加实现后台权限添加的效果
May 28 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
js实现延迟加载的几种方法
Apr 24 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
Jun 28 Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 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定时执行任务实现方法详解(Timer)
2015/07/30 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
python读文件逐行处理的示例代码分享
2013/12/27 Python
简单理解Python中的装饰器
2015/07/31 Python
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
PyCharm代码格式调整方法
2018/05/23 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
python中return不返回值的问题解析
2020/07/22 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
python实现简单的学生管理系统
2021/02/22 Python
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
文化与传播毕业生求职信
2014/03/09 职场文书
幼师求职自荐信
2014/05/31 职场文书
教师自查自纠材料
2014/10/14 职场文书
庐山导游词
2015/02/03 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
公司会议开幕词
2016/03/03 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
python保存图片的四个常用方法
2022/02/28 Python