Bootstrap

小程序之 列表循环与自由选择器混搭（实现手动添加、删除列表，选择器互不干扰！）~~~

其实这个要明白列表循环与地区选择器的实现原理
关键函数：
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
      })
    }
  }

})

效果

在这里插入图片描述

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
Python的3D可视化库 - vedo (3)visual子模块 点对象的可视化控制
JWT基础原理
mongoose --- populate主要操作以及简单和$lookup对比
Unity Mesh 钻研（01）
Linux的jupyter lab启动，无法从远程的浏览器中访问
手搓一个不用中间件的分表策略
Java基础知识点梳理（详细）
Python+Flask+Pandas怎样实现任意时间范围的对比数据报表
鸿蒙本地模拟器 模拟TCP服务端的过程
Vue2 使用 threejs 导入建模实现炫酷登录页
;