微信小程序实现通过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 相关文章推荐
img标签中onerror用法
Aug 13 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
js继承实现方法详解
Dec 16 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
初探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中foreach循环中使用引用要注意的地方
2011/01/02 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
绝对经典成功的大学生推荐信
2013/11/08 职场文书
房地产员工找工作的自我评价
2013/11/15 职场文书
门诊挂号室室长岗位职责
2013/11/27 职场文书
人事主管岗位职责范本
2013/12/04 职场文书
老师自我鉴定范文
2013/12/25 职场文书
大学四年规划书范文
2013/12/27 职场文书
学生打架检讨书
2014/02/14 职场文书
节约用水倡议书
2014/04/16 职场文书
公司总经理岗位职责
2015/04/01 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
餐厅服务员管理制度
2015/08/05 职场文书