小程序开发记录(一)

写在前面:初次尝试小程序,在不使用框架的情况下,如果遇到问题,可以尽量去参考官方文档

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`的事件处理函数。用户可以点击这个按钮来执行筛选操作。

综合来说，这段代码创建了一个包含两个日期选择器和一个筛选按钮的用户界面元素，允许用户选择起始日期和结束日期，然后点击筛选按钮来触发筛选操作。日期选择器的选择结果将通过事件处理函数绑定到对应的数据变量中，以便在后续的逻辑中使用。