欧美人与动牲交zooz,久久这里只有精品18,啦啦啦在线视频免费观看高清 ,欧美激情网,国产欧美亚洲高清 ,久久综合噜噜激激的五月天

你是否在開發(fā)微信小程序時(shí)，遇到一些困難，在開發(fā)時(shí)總是覺得不順手，在終于搞明白后氣的想砸電腦，可能是因?yàn)檫@些小技巧你沒有用到：

一：引入iconfont

在小程序中引入字體圖標(biāo)要比web麻煩一些，簡單說需要三步：

1、下載iconfont，把iconfont.css復(fù)制到iconfont.wxss，在app.wxss中引入

2、查看iconfont在unicode模式下的在線鏈接，替換iconfont.wxss中的鏈接為遠(yuǎn)程鏈接

3、在wxml文件中引入對應(yīng)的icon class
<icon class="iconfont icon-pay"></icon>

二：使用less

1、vscode安裝easy less插件

2、創(chuàng)建一個less目錄，用于存放less文件

3、文件頭部添加編譯注釋 // out: ../pages/index/index.wxss, compress: true, sourceMap: false

4、ctrl + s保存后自動編譯

三：按鈕重置

小程序中的按鈕功能強(qiáng)大，很多功能必須要用按鈕，比如彈出用戶授權(quán)，調(diào)用客服功能。默認(rèn)的樣式一般無法滿足需求，可以把按鈕樣式統(tǒng)一重置，然后自己寫樣式

button {
  padding: 0;
  background: #fff;
  line-height: 0;
  &::after {
    border-color: transparent;
  }
}
.button-hover {
  background: #fff;
}

四：支持async-await

async-await是ES7的語法，截止我寫這篇文章為止，小程序還是不支持async-await語法的，所以需要使用regenerator這個庫

1、下載regenerator，并把regenerator-runtime并放到utils目錄下

2. 在util.js引入 import regeneratorRuntime from './regenerator-runtime/runtime-module'

3、封裝wxRequest，讓它支持async-await

五：動態(tài)設(shè)置data中某個值

應(yīng)用場景：循環(huán)出來的列表，需要根據(jù)點(diǎn)擊項(xiàng)，動態(tài)改變列表中對應(yīng)id的數(shù)據(jù)

// 動態(tài)傳遞id
<block wx:for="{{list}}" wx:key="{{index}}">
  <view catch:tap="onChangeName" data-id="{{item.id}}"></view>
</block>

Page({
  data: {
    list:[{
      id: 0,
      name: 'wang'
    },{
      id: 1,
      name: 'li'
    }]
  },
  onChangeName: function(event){
    // 拿到id
   let id = event.target.dataset.id
   let key = `list[${id}].name`, val = 'zhang'
   // 設(shè)置值
   this.setData({
    [key]: val
   })
  }
})

六：flex布局，溢出省略號無效

flex布局，溢出省略號無效

.wrap {
  display: flex;
}
.sub {
  flex: 1;
  width: 0; // 寬度設(shè)為0
}
.sub text {
  display: block; // 一定要設(shè)置成block
}

<view calss="wrap">
  <image src="i.png"/>
  <view class="sub">
    <text>一段文本一段文本一段文本一段文本一段文本一段文本</text>
    <view>其他</view>
  </view>
</view>

七：組件事件傳遞

任務(wù)：父組件向子組件傳遞初始數(shù)據(jù)，當(dāng)子組件點(diǎn)擊以后可以triggerEvent自定義事件，父組件執(zhí)行自定義事件，重新請求數(shù)據(jù)并傳給子組件

/* 子組件 */ <view> <view bind:tap="setId" data-id="1"></view>
</view>

properties: {
  list: { type: Array,
    default: []
  }
},

methods: {
  setId(e) { let id = e.currentTarget.dataset.id
    this.triggerEvent('deleteFav', id)
  }
}

/* 父頁面 */
<child bind:customEvent="deleteFav"></child>

data: {
  list: []
},
deleteFav(e) { let id = e.detail // 獲取傳遞過來的數(shù)據(jù)
  // 根據(jù)id請求數(shù)據(jù)，然后重新setData let newData = [1,2,3]
  this.setData({
    list: newData
  })
}

八：使用wxParse解析HTML

1、下載 wxParse ，放到utils目錄下
2、在JS頁面引入： import WxParse from '../../utils/wxParse/wxParse'
Page({
  data:{
    contentHTML:'' // 解析后的HTML
  },
  onLoad: function() {
    // 請求到的HTML數(shù)據(jù)
    let content = '<div>我是HTML代碼</div>', that = this;
    WxParse.wxParse('contentHTML', 'html', content, that, 0);
  }
})

3、顯示解析內(nèi)容
<import src="../../utils/wxParse/wxParse.wxml"/>
<view>
  <!-- 顯示內(nèi)容 -->
  <template is="wxParse" data="{{wxParseData:contentHTML.nodes}}" />
</view>

九：圖片等比例

image標(biāo)簽有個mode屬性，可以設(shè)置圖片如何顯示，如果文檔看的不仔細(xì)還真容易發(fā)現(xiàn)

<image src="test.png" mode="widthFix"/>

十：上拉加載和下拉刷新

{
  "onReachBottomDistance": 0,
  "enablePullDownRefresh": true
}

data: {
  limit: 30,
  page: 1,
  list:[],
  count:0
},
// 下拉
onPullDownRefresh: function () {
  this.setData({
    page: 1,
    list:[]
  })
  this.getData()
},
// 上拉
onReachBottom: function () {
  if(this.data.list.length >= this.data.count) {
    return false
  }
  this.setData({
    page: this.data.page + 1
  })
  this.getData()
  wx.stopPullDownRefresh()
},
getData: async function () {
  await wxRequest(app.globalData.baseUrl + '/test', {
    data: {
      page: this.data.page,
      limit: this.data.limit,
    }
  }).then((ret) => {
    let list = this.data.list.concat(ret.data.list)
    this.setData({
      list: list,
      count: ret.data.count
    })
  })
}

?

以上就是可速云小編為大家?guī)淼男〕绦蛸Y訊，更多相關(guān)資訊請點(diǎn)擊“可速云”查閱。