微信小程序?qū)崿F(xiàn)通過(guò)js操作wxml的wxss屬性示例

本文實(shí)例講述了微信小程序?qū)崿F(xiàn)通過(guò)js操作wxml的wxss屬性。分享給大家供大家參考，具體如下：

創(chuàng)新互聯(lián)致力于互聯(lián)網(wǎng)網(wǎng)站建設(shè)與網(wǎng)站營(yíng)銷，提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、網(wǎng)站開(kāi)發(fā)、seo優(yōu)化、網(wǎng)站排名、互聯(lián)網(wǎng)營(yíng)銷、成都小程序開(kāi)發(fā)、公眾號(hào)商城、等建站開(kāi)發(fā)，創(chuàng)新互聯(lián)網(wǎng)站建設(shè)策劃專家，為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制解決方案，幫助客戶在新的全球化互聯(lián)網(wǎng)環(huán)境中保持優(yōu)勢(shì)。

微信小程序如何通過(guò)js操作html的css屬性：

在web端、手機(jī)端、webApp中可以通過(guò)js獲取dom的方式設(shè)置dom屬性。

微信小程序中，不能通過(guò)這種方式進(jìn)行操作。

如何在微信小程序中在wxml中操作wxss的屬性。

實(shí)現(xiàn)思路：

通過(guò)利用數(shù)據(jù)綁定實(shí)現(xiàn)動(dòng)態(tài)改變樣式，

1、在wxxml標(biāo)簽內(nèi)嵌css屬性上綁定js的date值

2、通過(guò)js中綁定css屬性的date值改變wxml標(biāo)簽內(nèi)嵌的css屬性

實(shí)現(xiàn)效果：點(diǎn)擊所在地區(qū)，彈出選擇地區(qū)的浮層

微信小程序?qū)崿F(xiàn)通過(guò)js操作wxml的wxss屬性示例

實(shí)現(xiàn)代碼：

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' >選擇地區(qū)</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'>聯(lián)系方式 ：</view>
 <input class='inputclass' placeholder="聯(lián)系方式" />
</view>
<view class='item' bindtap='showselectregion'>
 <view style='color:#000;margin-top:10px;margin-left:10px'>所在地區(qū) ：</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'>詳細(xì)地址 ：</view>
 <input class='inputclass' placeholder="詳細(xì)地址" />
</view>
<view class='item'>
 <view style='color:#000;margin-top:10px;margin-left:10px'>標(biāo)簽 ：</view>
 <view class='addresstag' >家</view>
 <view class='addresstag'>公司</view>
 <view class='addresstag'>學(xué)校</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({
 /**
  * 頁(yè)面的初始數(shù)據(jù)
  */
 data: {
  isShowSelectAddress:"none"
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
  */
 onLoad: function (options) {
  wx.setNavigationBarTitle({
   title: '編輯地址'
  });
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
  */
 onReady: function () {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
  */
 onShow: function () {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
  */
 onHide: function () {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
  */
 onUnload: function () {
 },
 /**
  * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
  */
 onPullDownRefresh: function () {
 },
 /**
  * 頁(yè)面上拉觸底事件的處理函數(shù)
  */
 onReachBottom: function () {
 },
 /**
  * 用戶點(diǎn)擊右上角分享
  */
 onShareAppMessage: function () {
 },
 goBack:function(){
  wx.navigateBack({
  });
 },
 showselectregion:function(){
  this.setData({
   isShowSelectAddress:"block"
  })
 }
})

希望本文所述對(duì)大家微信小程序開(kāi)發(fā)有所幫助。

標(biāo)題名稱：微信小程序?qū)崿F(xiàn)通過(guò)js操作wxml的wxss屬性示例
當(dāng)前URL：http://www.aaarwkj.com/article25/pcssci.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、、電子商務(wù)、網(wǎng)站設(shè)計(jì)公司、品牌網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

微信小程序?qū)崿F(xiàn)通過(guò)js操作wxml的wxss屬性示例