微信小程序-項目記

• radio
• 自定義組件
• 事件綁定
• 屬性綁定
• 路由跳轉
• wx:for="{{}}"

radio

在使用radio的時候，遇到了一些問題。

1. 外層包裹radio-group
2. js中使用setData
3. radio 樣式寫在radio .wx-radio-input裏
4. 選中樣式寫在radio .wx-radio-input.wx-radio-input-checked
5. 選中樣式的background 一定要加 !important
6. 僞類radio .wx-radio-input.wx-radio-input-checked::before 有一個默認縮放，所以如果想全部填充滿，需要設置 transform: scale(1);
7. 微信單選默認的對號√ ，在僞類:: before 的 content 中
8. 想像原生一樣通過label隱藏input自定義單選按鈕樣式在微信小程序是不可行的。
   9.值在 e.detail.value

效果圖

.wxml

<view class="radioGroupWrap">
  <view class="radioGroupTitle">事件類型</view>
  <view class="radioGroup">
  <radio-group class="radioGroup" bindchange="radioChange">
    <label class="radioGroupCell">
      <radio value="1"></radio>
      <view class="radio">
        <image src="/static/image/xuanzhong.png" class="radioBg"></image>
      </view>疫情求助
    </label>
    <label class="radioGroupCell">
      <radio value="2"></radio>
      <view class="radio"></view>線索反饋
    </label>
    <label class="radioGroupCell">
      <radio value="3"></radio>
      <view class="radio"></view>其他情況
    </label>
  </radio-group>
  </view>
</view>

.wxss

/* radio */
.radioGroupWrap {
  border-bottom: 1rpx solid #d8d8d8;
}
.radioGroupTitle {
  margin-top: 38rpx;
  width: 100%;
  color: #333;
  font-size: 30rpx;
  line-height: 36rpx;
}
.radioGroup {
  display: flex;
  flex-wrap: wrap;
  font-size: 36rpx;
  color: #333;
  line-height: 88rpx;
  min-height: 88rpx;
}
.radioGroupCell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-right: 30rpx;
}
radio {
  font-size: 0;
  outline: none;
  padding: 0;
}
radio .wx-radio-input {
  /* display: none; */
  display: inline-block;
  position: relative;
  width: 36rpx;
  height: 36rpx;
  margin-right: 8rpx;
  border: 1rpx solid #c2c2c2;
  background: #efefef;
  border-radius: 50%;
  /* border-radius: 0; */
  box-sizing: border-box;
  overflow: visible;
}
.radioGroupCell .radio {
  display: inline-block;
  position: relative;
  width: 36rpx;
  height: 36rpx;
  margin-right: 8rpx;
  border: 1rpx solid #c2c2c2;
  background: #efefef;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
}
radio .wx-radio-input.wx-radio-input-checked {
  background: #005EF8!important;
  /* background: transparent!important; */
  border: 0;
}
radio .wx-radio-input.wx-radio-input-checked::before {
  position: absolute;
  width: 36rpx!important;
  height: 36rpx!important;
  top: 0;
  left: 0;
  border-radius: 50%;
  transform: scale(.7);
}

使用組件

使用自定義的組件時，按照文檔寫完引入，引入路徑是相對目錄，引入完成後頁面卻加載不出組件，多方查看，發現使用的頁面最外層寫的標籤是 <text> 換成 <view> 標籤後組件出現。

事件綁定

使用微信小程序時與之前使用react、vue進行數據綁定有很大區別。

1. 使用 bind+事件 進行綁定，且綁定後面只能有函數名，不能帶參數。
2. 如果需要進行傳參，需要使用 `data-參數名 = 參數`` 的形式進行數據綁定。

<li
	class="item"
	bindtap="go"
	data-path="/home">
	home
</li>

js中

go(e) {
  console.log(e.currentTarget.dataset)
}

三元運算符

bindtap="{{unclick?'':'query'}}"

必須加單引號

屬性綁定

之前使用vue習慣綁兩個class，一個公共的一個私有的，發現微信如果屬性名如果出現兩次，後面的會覆蓋前面的。

路由跳轉

跳轉帶的參數，在 this.options 中