微信小程序实现通过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 相关文章推荐
showModalDialog 和 showModelessDialog
Jan 22 Javascript
Javascript 个人笔记(没有整理,很乱)
Jul 07 Javascript
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
node.js中的http.request方法使用说明
Dec 14 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
在vue中使用image-webpack-loader实例
Nov 12 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中Socket创建与监听实现方法
2015/01/05 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
python检测lvs real server状态
2014/01/22 Python
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
Tesserocr库的正确安装方式
2018/10/19 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
python elasticsearch环境搭建详解
2019/09/02 Python
python绘制随机网络图形示例
2019/11/21 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
预备党员党校学习自我评价分享
2013/11/12 职场文书
宝宝周岁宴答谢词
2014/01/26 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
数学教学随笔感言
2014/02/17 职场文书
工作表扬信范文
2015/01/17 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
鉴史问廉观后感
2015/06/10 职场文书
员工离职证明范本
2015/06/12 职场文书
用python实现监控视频人数统计
2021/05/21 Python
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python