最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

微信小程序实现通过js操作wxml的wxss属性示例

来源:动视网 责编:小采 时间:2020-11-27 22:02:52
文档

微信小程序实现通过js操作wxml的wxss属性示例

微信小程序实现通过js操作wxml的wxss属性示例:本文实例讲述了微信小程序实现通过js操作wxml的wxss属性。分享给大家供大家参考,具体如下: 微信小程序如何通过js操作html的css属性: 在web端、手机端、webApp中可以通过js获取dom的方式设置dom属性。 微信小程序中,不能通过这种方式进行操作。 如何在微
推荐度:
导读微信小程序实现通过js操作wxml的wxss属性示例:本文实例讲述了微信小程序实现通过js操作wxml的wxss属性。分享给大家供大家参考,具体如下: 微信小程序如何通过js操作html的css属性: 在web端、手机端、webApp中可以通过js获取dom的方式设置dom属性。 微信小程序中,不能通过这种方式进行操作。 如何在微


本文实例讲述了微信小程序实现通过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='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操作wxml的wxss属性示例

微信小程序实现通过js操作wxml的wxss属性示例:本文实例讲述了微信小程序实现通过js操作wxml的wxss属性。分享给大家供大家参考,具体如下: 微信小程序如何通过js操作html的css属性: 在web端、手机端、webApp中可以通过js获取dom的方式设置dom属性。 微信小程序中,不能通过这种方式进行操作。 如何在微
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top