微信小程序实现通过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 相关文章推荐
谷歌浏览器 insertCell与appendChild的区别
Feb 12 Javascript
jQuery 获取对象 定位子对象
May 31 Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
jquery+ajax请求且带返回值的代码
Aug 12 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
JS左右无缝轮播功能完整实例
May 16 Javascript
JavaScript组合模式---引入案例分析
May 23 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
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
解析CodeIgniter自定义配置文件
2013/06/18 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
vue组件学习教程
2017/09/09 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
python创建线程示例
2014/05/06 Python
Python实现爬取逐浪小说的方法
2015/07/07 Python
Python上下文管理器和with块详解
2017/09/09 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
python文字转语音的实例代码分析
2019/11/12 Python
学Python 3的理由和必要性
2019/11/19 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
基于python实现查询ip地址来源
2020/06/02 Python
python复合条件下的字典排序
2020/12/18 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
公司办公室岗位职责
2014/03/19 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
班风学风建设方案
2014/05/06 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
Python上下文管理器Content Manager
2021/06/26 Python