本文实例讲述了微信小程序实现通过js操作wxml的wxs属性。分享给大家供大家参考,具体如下:
微信小程序如何通过js操作html的css属性:
在网页端,手机端,应用中可以通过js获取dom的方式设置dom属性。
微信小程序中,不能通过这种方式进行操作。
如何在微信小程序中在wxml中操作wxs的属性。
<>强实现思路:
通过利用数据绑定实现动态改变样式,
1,在wxxml标签内嵌css属性上绑定js的日期值
2,通过js中绑定css属性的日期值改变wxml标签内嵌的css属性
<>强实现效果:点击所在地区,弹出选择地区的浮层
<>强实现代码:
editAddress.wxml:
& lt;视图类=岸ゼ丁北?
& lt;图像bindtap=胺祷亍眂lass=' leftdection ' src=" https://www.yisu.com/images/leftdection02.png "祝辞& lt;/image>
& lt; text>我的反馈& lt;/text>
& lt;文本类=' righttag ' bindtap=' sendfeedback祝辞保存& lt;/text>
& lt;/view>
& lt;视图类=癲ialogWrap”风格=跋允?{{isShowSelectAddress}}”在
& lt;视图类=' selectaddress祝辞选择地区& lt;/view>
& lt;/view>
& lt;视图类='物品'比;
& lt;视图风格='颜色:# 000;margin-top: 10 px; margin-left: 10 px的祝辞收货人:& lt;/view>
& lt;输入类=癷nputclass”占位符=笆栈跞恕弊远越?比;
& lt;/view>
& lt;视图类='物品'比;
& lt;视图风格='颜色:# 000;margin-top: 10 px; margin-left: 10 px的祝辞联系方式:& lt;/view>
& lt;输入类=癷nputclass”占位符=傲捣绞健?比;
& lt;/view>
& lt;视图类='物品' bindtap=皊howselectregion”比;
& lt;视图风格='颜色:# 000;margin-top: 10 px; margin-left: 10 px的祝辞所在地区:& lt;/view>
& lt;文本样式=margin-top: 10 px的祝辞gdgdfgdf
& lt;图像类=' rightdirectionclass ' src=" https://www.yisu.com/images/leftdirection.png "祝辞& lt;/image>
& lt;/view>
& lt;视图类='物品'比;
& lt;视图风格='颜色:# 000;margin-top: 10 px; margin-left: 10 px的祝辞详细地址:& lt;/view>
& lt;输入类=癷nputclass”占位符=跋晗傅刂贰?比;
& lt;/view>
& lt;视图类='物品'比;
& lt;视图风格='颜色:# 000;margin-top: 10 px; margin-left: 10 px的祝辞标签:& lt;/view>
& lt;视图类=' addresstag祝辞家& lt;/view>
& lt;视图类=' addresstag祝辞公司& lt;/view>
& lt;视图类=' addresstag '在学校& lt;/view>
& lt;视图类=癮ddresstag”在其他& lt;/view>
& lt;/view>
之前
editAddress.wxss:
页面{
宽度:100%;高度:100%;位置:相对的
}
.leftdection {
宽度:20 px;高度:20 px;位置:绝对的,左:0;
margin-top: 5 px; margin-left: 20 px;
}
.righttag {
位置:绝对的;
右:0;
margin-right: 10 px;
颜色:红色;
}
.item {
宽度:100%;高度:50 px;背景:# fff;
显示:flex; flex-direction:行;
边界底部:1 px固体# 000
}
.inputclass {
宽度:220 px;高度:25 px;边界:0 px固体# 000;
margin-top: 10 px
}
.addresstag {
宽度:25 px;高度:25 px;边界:1 px固体# 000;padding-left: 8 px;
padding-top: 10 px;字体大小:10 px; margin-top: 10 px; margin-left: 10 px
}
.dialogWrap {
位置:绝对的;
宽度:100%;高度:94%;背景:rgba (0, 0, 0, 0.1);
}
.selectaddress {
位置:绝对的,底部:0;
宽度:100%;背景:rgba (0, 0, 0, 0.3);
身高:240 px;
}
.rightdirectionclass {
宽度:25 px;高度:25 px;位置:绝对;右:20 px;
margin-top: 10 px;
}
之前
editAddress.js:
页面({/* *
*页面的初始数据
*/数据:{
isShowSelectAddress:“没有”
},/* *
*生命周期函数——监听页面加载
*/onLoad:功能(选项){
wx.setNavigationBarTitle ({
标题:“编辑地址”
});
},/* *
*生命周期函数——监听页面初次渲染完成
*/onReady:函数(){
},/* *
*生命周期函数——监听页面显示
*/昂秀:函数(){
},/* *
*生命周期函数——监听页面隐藏
*/onHide:函数(){
},/* *
*生命周期函数——监听页面卸载
*/onUnload:函数(){
},/* *
*页面相关事件处理函数——监听用户下拉动作
*/onPullDownRefresh:函数(){
},/* *
*页面上拉触底事件的处理函数
*/onReachBottom:函数(){
},/* *
*用户点击右上角分享
*/onShareAppMessage:函数(){
},
返回:函数(){
wx.navigateBack ({
});
},
showselectregion:函数(){
this.setData ({
isShowSelectAddress:“块”
})
}
})
