小程序之 列表循環與自由選擇器混搭（實現手動添加、刪除列表，選擇器互不干擾！）~~~

其實這個要明白列表循環與地區選擇器的實現原理
關鍵函數：
e.currentTarget.dataset.id; //獲取節點data - id 裏面的內容！

首先是html。。。。。。

<view class="page-tips02">提示：此頁面參數均爲必填參數 </view>


<!-- 步驟進度 -->
<view class="process page-flex">
  <view class="process-null"></view>

  <view class="process-list">
    <image class="process-background" src="../../img/public/process01.png"></image>
    <view class="process-mess01">1.基本信息</view>
  </view>

  <view class="process-list">
    <image class="process-background" src="../../img/public/process01.png"></image>
    <view class="process-mess01">2.封面設計</view>
  </view>

  <view class="process-list">
    <image class="process-background" src="../../img/public/process01.png"></image>
    <view class="process-mess01">3.內頁參數</view>
  </view>

  <view class="process-list">
    <image class="process-background" src="../../img/public/process02.png"></image>
    <view class="process-mess02">4.其他信息</view>
  </view>

  <view class="process-null"></view>
</view>


<!-- 內頁設置 -->
<block wx:for='{{arrays}}'>
  <view class="page-card InsidepPages" data-id='{{item.id}}' >

    <view class="page-view list animation list-top" >
      <view class="page-view-title2">內頁類型</view>
      <view class="page-view-mess2">
        內頁
      </view>
      <view class="page-hr"></view>
    </view>

    <view class="page-view list">
      <view class="page-view-title2">內頁P數</view>
      <picker class="page-view-mess2 mess" bindchange="selectBookmark" data-id='{{item.id}}' value="{{index}}" range="{{array}}">
        <view>
          {{array[item.index]}}
        </view>
      </picker>
      <view class="page-hr"></view>
    </view>

    <view class="page-view list">
      <view class="page-view-title2">內頁紙張</view>
      <picker class="page-view-mess2 mess" bindchange="selectNumber" data-id='{{item.id}}' value="{{index02}}" range="{{array02}}">
        <view>
          {{array02[item.index02]}}
        </view>
      </picker>
      <view class="page-hr"></view>
    </view>

    <view class="page-view list">
      <view class="page-view-title2">印刷顏色</view>
      <picker class="page-view-mess2 mess" bindchange="selectMode" data-id='{{item.id}}' value="{{index03}}" range="{{array03}}">
        <view>
          {{array03[item.index03]}}
        </view>
      </picker>
    </view>
    <view class="page-hr"></view>
  </view>


</block>

<view class="page-button page-flex ">
  <view bindtap="add" class="button01">添加內頁</view>
  <view bindtap="reduce" class="button03">刪除內頁</view>
  <view class="button02">下一步</view>
</view>

css 其實是一個非常關鍵的東西，只是絕大多數程序員都對他不怎麼重視！
我一般會採用一個基礎css 跟每個模塊的css 共同組成樣式
好比小程序的基礎樣式是app.css 每個頁面有他們的特與的樣式css
下面的是一個簡單的基礎css

接下來是css，因爲擁有基礎css 與 每個頁面的css 所以有兩個。。。。。

/**app.wxss**/

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

page {
  background: #f2f2f2;
  font-size: 14px;
  width: 100%;
  height:100%;
  margin:0;
  padding: 0;
  /* background: #000000; */

}
.main{
  position: relative;
  width: 100%;
  height: 100%;
  /* background: #000000; */
}

/* 絕對定位居中 */

.position-ab-center {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

/* 相對定位居中 */

.position-re-center {
  position: relative;
  margin: 0 auto;
}

/* 通用卡片 */

.page-card {
  width: calc(100% - 20px);
  position: relative;
  margin: 0 auto;
  background: #fff;
  border-radius: 4px;
}

/* 自定義長方形標題信息文本  */

.page-view {
  position: relative;
  width: 100%;
  height: 40px;
}

.page-view-title {
  position: absolute;
  left: 40px;
  line-height: 40px;
}

.page-view-mess {
  position: absolute;
  right: 26px;
  line-height: 40px;
  text-align: right;
}

.page-view-img {
  position: absolute;
  width: 24px;
  height: 24px;
  left: 10px;
  top: 0;
  bottom: 0;
  margin: auto;
}

.page-view-title2 {
  position: absolute;
  left: 10px;
  line-height: 40px;
}

.page-view-mess2 {
  position: absolute;
  right: 10px;
  line-height: 40px;
}

.page-view2 {
  position: relative;
  width: 100%;
  height: 30px;
}

.page-view2-img {
  position: absolute;
  width: 15px;
  height: 15px;
  left: 10px;
  top: 0;
  bottom: 0;
  margin: auto;
}

.page-view2-title {
  position: absolute;
  left: 30px;
  line-height: 30px;
}
.page-view2-title2 {
  position: absolute;
  left: 10px;
  line-height: 30px;
}

.page-view2-mess {
  position: absolute;
  right: 10px;
  line-height: 30px;
}

/* 自定義橫線 */

.page-hr {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 96%;
  height: 1px;
  background: #f2f2f2;
  right: 0;
  bottom: 0;
}

/* 彈性佈局 */

.page-flex {
  position: relative;
  display: flex;
}

.page-flex-center {
  justify-content: space-around;
}
.page-flex-wap {
  flex-wrap:wrap;
   flex-direction: row;
}

/* 按鈕 */

.page-btn1 {
  position: relative;
  width: 60%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 4px;
  border: 1px solid #999;
}

.page-button {
  position: fixed;
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background: #fff;
  bottom: 0;
  box-shadow: 0 0 2px #e2e2e2;
  margin: auto;
}

/* 單行省略 */

.page-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 自定義表格 */

.page-table {
  width: auto;
  height: auto;
  overflow-x: auto;
}

.page-table-tr {
  width: auto;
  height: auto;
  white-space: nowrap;
}

.page-table-td, .page-table-th {
  width: 100px;
  text-align: center;
  height: auto;
  line-height: 24px;
  padding: 3px 6px;
  font-size: 12px;
  display: inline-block;
  color: #666;
  white-space: normal;
  vertical-align: middle;
  border: 1px solid #f2f2f2;
}

.page-table-th {
  color: #333;
}

/* 頂部提示 */
.page-tips01 , .page-tips02{
  position: relative;
  width:100%;
  height: auto;
  text-align: center;
  font-size: 10px;
  padding: 2px 0;
}
.page-tips01 {
  background: #90DD8F;
}
.page-tips02{
  background: #BD2323;
  color: #ffffff;
}


/* 點擊效果的樣式 */
.ripple {
  background-color: #d1d1d1;
  background-position: 50% 50%;
  border-radius: 100%;
  height: 10px;
  width: 10px;
  margin-top: -90px;
  position: absolute;
  top:-200px;
  left:-200px;
  z-index: 9999;
}


@keyframes ripple {
  100% {
    transform:scale(10,10);
    background-color: transparent;
  }
}

分頁面樣式 ，看效果可以直接複製！！！

分頁面樣式

/* pages/Picture/Picture.wxss */
.process{
  width: 100%;
  height: 50px;
  margin-top: 4px;
  margin-bottom: 10px;
  background: #ffffff;
}
.process-list{
  position: relative;
  height: 20px;
  margin-top: 15px;
  width: 50%;
}
.process-null{
  width: 20px;
}
.process-background{
  position: relative;
  height: 20px;
  width: 100%;
}
.process-mess01 , .process-mess02{
  position: absolute;
  top:0;
  width: 100%;
  text-align: center;
  line-height: 20px;
  font-size: 10px;
}
.process-mess01{
  color: #ffffff;
}
.process-mess02{
  color: #999999;
}
InsidepPages{
  background: #ffffff;
  box-shadow: 0 0 4px #d8d8d8;
}
.list-top{
  background: #BAE6BA;
  border-radius: 4px 4px 0 0;
}
.top-list-title{
  color: #BD2323;
}
.top-list-img{
  right:10px;
  left:	auto;
}
.list{
  /* background: #ffffff; */
  margin: 2px 0;
}
.mess{
  color: #666666;
}
.message{
  font-size: 10px;
  color:#999999;
}
.button01 , .button02 ,.button03{
  position: relative;
  width: 50%;
}
.button01{
  color: #666666;
}
.button03{
  color: #ffffff;
  background: #BD2323;
}
.button02{
  background: #029688;
  color: #ffffff;
}

/* 動畫效果 */
.animation{
  /* animation:  first 0.4s ; */  
  /* 用數據綁定來實現 */
}
@keyframes first
{
0% {background:#ffffff;}
50%{background:#BD2323;}
100%{background:#ffffff;}
}

前端最重要的就是js邏輯，廢話不多說，

js：

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    arrays: [{
      id: 0,
      index: 0,
      index02: 0,
      index03: 0,
    }],
    array: ['選項1', '選項2', '選項3', '選項4'],
    array02: ['選項1', '選項2', '選項3', '選項4'],
    array03: ['選項1', '選項2', '選項3', '選項4'],
  },

  // 內頁設置
  selectBookmark: function(e) {
    var id = e.currentTarget.dataset.id;
    console.log(id);
    console.log('書籤選擇下標' + e.detail.value);
    var index = 'arrays[' + id + '].index';
    this.setData({
      [index]: e.detail.value
    })
  },
  selectNumber: function(e) {
    var id = e.currentTarget.dataset.id;
    console.log(id);
    console.log('書籤選擇下標' + e.detail.value);
    var index02 = 'arrays[' + id + '].index02';
    this.setData({
      [index02]: e.detail.value
    })
  },
  selectMode: function(e) {
    var id = e.currentTarget.dataset.id;
    console.log(id);
    console.log('書籤選擇下標' + e.detail.value);
    var index03 = 'arrays[' + id + '].index03';
    this.setData({
      [index03]: e.detail.value
    })
  },
  // 添加內頁
  add: function () {
    // 獲取長度
    var length = this.data.arrays.length;
    console.log('數組長度爲：' + length);
    // 計算最後一個ID爲多少
    var id = this.data.arrays[length - 1].id;
    console.log('最後一個數組的id爲：' + id);
    // 創建一個臨時數組，設置他的id參數爲最後一個數組的id數值+1；注意這是關鍵裏面的結構必須與原始數組結構一樣！！！！！
    var tempArrays = {
      id: 0,
      index: 0,
      index02: 0,
      index03: 0,
    };
    tempArrays.id = id + 1;
    console.log('臨時數組的id爲：' + tempArrays.id);
    //動態添加一個數組;
    this.data.arrays.push(tempArrays);
    console.log(this.data.arrays)
    this.setData({
      arrays: this.data.arrays
    })
  },
  // 添加刪除內頁
  reduce: function () {
    var length = this.data.arrays.length;
    if (length > 1) {
      //執行刪除代碼
      this.data.arrays.pop();
      this.setData({
        arrays: this.data.arrays
      })
    } else {
      wx.showToast({
        title: '內頁至少存在一個！',
        icon: 'none',
        duration: 2000
      })
    }
  }

})

效果