小程式開發記錄(一)

寫在前面:初次嘗試小程式,在不使用框架的情況下,如果遇到問題,可以儘量去參考官方文檔

1.scroll-view組件

scroll-view是一個可滑動的組塊.需要設置其中具體的height高度,並且在標簽中設置scroll-y="true";

1 <scroll-view class="sceoll_style" scroll-y="true" bindscrolltolower='scrollToLower' lower-threshold='30'>

2 </scroll-view>

bindscrolltolower='scrollToLower',這一句是用來表示scroll觸底所觸發的事件,

觸底時間可以進行調用載入數據介面,並且這個數據介面一定是分頁訪問的,(後端不給分頁介面就幹不了嗷)

請求參數里 pageNum+1,然後拼接得到的數據數組.

lower-threshold='30',這一句是用來表示觸底距離的計算.

2.動態區分選中狀態

這裡是html設計

<view class="title_main">
  <view wx:for="{{conditionList}}" wx:for-item="oneitem" >
  <!--這裡動態顯示選中狀態-->
  <view class="chosetitle{{activeItem==oneitem.id?'_ischose':''}}" bindtap="SyntheSize" data-item="{{oneitem.id}}">
  {{oneitem.name}}</view>
  </view>
</view>

這裡是css文件

.title_main{
  padding-left: 15rpx;
  width: 100%;
  height: 150rpx;
  line-height: 150rpx;
  display: flex;
  background-color: rgb(0, 148, 0);
}
.chosetitle_ischose{
  font-weight:900;
  font-size: 16px;
  width: 180rpx;
  height: 150rpx;
  font-size: large;
  line-height: 150rpx;
  color: white;
  background-color:rgb(0, 114, 0) ;
  text-align: center;
}
.chosetitle{
  width: 180rpx;
  height: 150rpx;
  font-size: large;
  line-height: 150rpx;
  color: white;
  text-align: center;
}

JS中的業務設計

在JS中完成賦值,才能在html進行比對,並且產生差異的效果;

效果如圖: 

3.動態滑動加狀態區分

<!--訂單選項設計-->
<scroll-view class="Stytle_scroll" scroll-x="true" show-scrollbar="false">
  <view class="One_orderState" wx:for="{{conditionList}}" wx:for-item="title_item">
    <view class="One_orderState_item{{activeItem==title_item.id?'_ischose':''}}" data-id="{{title_item.id}}" bindtap="handoff_state">{{title_item.name}}</view>
  </view>
</scroll-view>

1. `<scroll-view class="Stytle_scroll" scroll-x="true" show-scrollbar="false">`：這是一個滾動視圖容器，用於在水平方向上滾動內容。`class`屬性用於設置CSS類名，以便樣式控制。`scroll-x="true"`屬性表示允許水平滾動，`show-scrollbar="false"`屬性表示隱藏滾動條。

2. `<view class="One_orderState" wx:for="{{conditionList}}" wx:for-item="title_item">`：這是一個視圖容器，其中包含了要迴圈渲染的一組視圖元素。`wx:for="{{conditionList}}"`指定了迴圈的數據源，`conditionList`是在小程式的數據綁定中定義的一個數組。`wx:for-item="title_item"`用於定義在每次迴圈中的當前項的別名，這裡的別名是`title_item`，你可以在迴圈內部使用它來訪問當前項的屬性。

3. `<view class="One_orderState_item{{activeItem==title_item.id?'_ischose':''}}" data-id="{{title_item.id}}" bindtap="handoff_state">{{title_item.name}}</view>`：這是迴圈渲染的視圖元素，它會根據`conditionList`數組中的數據項進行多次渲染。

- `class="One_orderState_item{{activeItem==title_item.id?'_ischose':''}}"`：這是一個視圖元素的CSS類名。根據條件判斷，它可能會附加`_ischose`類名，這取決於`activeItem`是否等於`title_item.id`，如果相等，則添加`_ischose`類名。

- `data-id="{{title_item.id}}"`：這是一個自定義的`data-*`屬性，用於存儲視圖元素的數據。在這裡，它存儲了`title_item.id`的值。

- `bindtap="handoff_state"`：這是一個點擊事件的綁定，當用戶點擊這個視圖元素時，會觸發名為`handoff_state`的事件處理函數。

- `{{title_item.name}}`：這是在視圖元素中顯示的文本內容，它來自於`title_item.name`，也是`conditionList`數組中的一部分數據。

綜合來說，這段代碼創建了一個水平滾動的視圖容器，其中包含了一組視圖元素，這些元素根據`conditionList`數組中的數據進行迴圈渲染。用戶可以點擊這些元素，觸發相應的事件處理函數。根據條件，某些元素可能會附加一個特定的CSS類名。

 3.時間篩選選擇

<!--時間篩選框-->
<view class="date_chose">
  <view class="chose_block">
    <text class="text_lable">開始:</text>
    <picker mode="date" value="{{startDate}}" start="1970-01-01" end="{{endDate}}" bindchange="bindStartDateChange">
      <view class="one_picker">{{startDate}}</view>
    </picker>
  </view>
  <view class="chose_block">
    <text class="text_lable">結束:</text>
    <picker mode="date" value="{{endDate}}" start="1970-01-01" end="{{today}}" bindchange="bindEndDateChange">
      <view class="one_picker">{{endDate}}</view>
    </picker>
  </view>

  <view class="filter-button" bindtap="filterData">篩選</view>
</view>
<!--時間篩選框結束-->

1. `<view class="date_chose">`：這是一個視圖容器（`<view>`）的起始標簽，`class`屬性設置了CSS類名，用於樣式控制。這個容器包含了日期選擇器和篩選按鈕。

2. `<view class="chose_block">`：這是一個包含日期選擇器和文本標簽的子視圖容器，用於包裹“開始日期”的部分。

- `<text class="text_lable">開始:</text>`：這是一個文本標簽，顯示"開始:"這個文本，用於標識日期選擇器的作用。

- `<picker>`：這是一個日期選擇器組件，通過`mode`屬性設置為"date"，表示選擇日期。`value`屬性用於綁定日期選擇器的值，`start`屬性設置了可選日期範圍的開始日期，`end`屬性設置了可選日期範圍的結束日期。

- `bindchange="bindStartDateChange"`：這個屬性指定了當用戶選擇日期後觸發的事件處理函數，通常用於處理日期選擇變化時的邏輯。

- `<view class="one_picker">{{startDate}}</view>`：這個`<view>`元素用於顯示選擇的開始日期，`{{startDate}}`是一個數據綁定，將日期選擇器的值綁定到這個視圖上，以便顯示用戶選擇的日期。

3. `<view class="chose_block">`：與前一個類似，但這個部分是用於選擇結束日期的。

4. `<view class="filter-button" bindtap="filterData">篩選</view>`：這是一個按鈕視圖，當用戶點擊它時，將觸發名為`filterData`的事件處理函數。用戶可以點擊這個按鈕來執行篩選操作。

綜合來說，這段代碼創建了一個包含兩個日期選擇器和一個篩選按鈕的用戶界面元素，允許用戶選擇起始日期和結束日期，然後點擊篩選按鈕來觸發篩選操作。日期選擇器的選擇結果將通過事件處理函數綁定到對應的數據變數中，以便在後續的邏輯中使用。