微信小程序如何通过js操作wxmll的wxss属性
2017-12-08 23:11
519 查看
微信小程序如何通过js操作html的css属性
在web端、手机端、webApp中可以通过js获取dom的方式设置dom属性。
微信小程序中,不能通过这种方式进行操作。
如何在微信小程序中在wxml中操作wxss的属性。
实现思路:
通过利用
1、在wxxml标签内嵌css属性上绑定js的date值
2、通过js中绑定css属性的date值改变wxml标签内嵌的css属性
实现效果: 点击所在地区,弹出选择地区的浮层
实现代码:
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"
})
}
})
在web端、手机端、webApp中可以通过js获取dom的方式设置dom属性。
微信小程序中,不能通过这种方式进行操作。
如何在微信小程序中在wxml中操作wxss的属性。
实现思路:
通过利用
数据绑定实现动态改变样式,
1、在wxxml标签内嵌css属性上绑定js的date值
2、通过js中绑定css属性的date值改变wxml标签内嵌的css属性
实现效果: 点击所在地区,弹出选择地区的浮层
实现代码:
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"
})
}
})
相关文章推荐
- 微信小程序中JS对象属性赋值
- 微信小程序如何实现通过点击view改变背景颜色
- 微信小程序-订单评价交互样式(WXML&WXSS&JS)
- 微信小程序的如何使用全局属性 —— 微信小程序教程系列(5)
- 如何通过js获得overflow属性为auto的元素的实际宽度
- 通过新浪云部署Node.js微信小程序商城(不用买域名、不用备案、不用配置https)
- 如何通过js关闭微信浏览器页面
- 如何在微信公众帐号开发模式下,通过程序代码向用户发送符号表情。
- Flex中如何通过tickValues属性,在程序中设置Slider坐标位置
- 如何在网页中通过js代码将直接关注某个微信账号
- 使用ASP.NET的C#语言写后台如何将数据返回给微信小程序的JS
- 通过新浪云部署NideShop微信小程序商城(基于Node.js+MySQL+ThinkJS)
- 微信小程序如何通过微信绑定的手机号进行快速登录
- JS中style属性控制,如何通过JS给一元素添加CSS相关属性
- 通过新浪云部署Node.js微信小程序商城(不用买域名、不用备案、不用配置https)
- ExtJS学习笔记(一):ExtJS程序的结构及如何定义js的private, public属性、方法
- 如何在PHP中通过ADO调用Asscess数据库和COM程序
- 如何通过js获取iframe框架中的内容
- 如何自定义微信小程序swiper轮播图面板指示点的样式
- 原生JS中如何获取CSS属性中的值