微信小程序实现通过js操作wxml的wxss属性示例
网络编程 2021-07-04 16:47www.168986.cn编程入门
这篇文章主要介绍了微信小程序实现通过js操作wxml的wxss属性,结合实例形式分析了微信小程序使用js操作wxml的wxss属性相关原理、实现技巧与操作注意事项,需要的朋友可以参考下
本文实例讲述了微信小程序实现通过js操作wxml的wxss属性。分享给大家供大家参考,具体如下
微信小程序如何通过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=''> <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-:10px;margin-left:10px'>收货人 </view> <input class='inputclass' placeholder="收货人" auto-focus/> </view> <view class='item'> <view style='color:#000;margin-:10px;margin-left:10px'>联系方式 </view> <input class='inputclass' placeholder="联系方式" /> </view> <view class='item' bindtap='showselectregion'> <view style='color:#000;margin-:10px;margin-left:10px'>所在地区 </view> <text style='margin-:10px'>gdgdfgdf</text> <image class='rightdirectionclass' src='../../../../images/leftdirection.png' ></image> </view> <view class='item'> <view style='color:#000;margin-:10px;margin-left:10px'>详细地址 </view> <input class='inputclass' placeholder="详细地址" /> </view> <view class='item'> <view style='color:#000;margin-: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-: 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-: 10px } .addresstag{ width:25px;height:25px;border: 1px solid #000;padding-left:8px; padding-: 10px;font-size: 10px;margin-: 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-: 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" }) } })
希望本文所述对大家微信小程序开发有所帮助。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程