局部滚动scroll-view

一、实现局部滚动scroll-view
首先实现水平和垂直拖动 使用scroll-x和scroll-y就可以了

<scroll-view class="container1" scroll-x>  //使用scroll就可以了
  <view wx:for="{{10}}" class="item1" >{{item}}</view>
</scroll-view>

二、滚动里一些事件

1、绑定滚动事件,再滚动就触发

python小程序加滚动条_绝对路径


然后返回的参数

python小程序加滚动条_python小程序加滚动条_02


2、其他事件


python小程序加滚动条_python小程序加滚动条_03


python小程序加滚动条_递归_04

rpx

二、rpx的使用

由于px是固定的大小,当手机屏幕大小发发生改变时候,无法做到自适应,但是rpx就可以,会随着屏幕大小做相对的增大和缩小,以下为如何通过px计算rpx

python小程序加滚动条_递归_05


三、Mustache语法的一些细节操作

python小程序加滚动条_python小程序加滚动条_06


第一个三目判断。

第二个通过js那边通过load方法里设置一个定时器实时刷新获取时间。

第三给绑定class。

四、hidden属性

python小程序加滚动条_绝对路径_07


python小程序加滚动条_xml_08

block标签

五、block标签

通常我们犹如下面这些标签这样子使用,对多个标签进行if或者for操作的时候,可以使用block,因为它只是一个标签,不渲染的

python小程序加滚动条_python小程序加滚动条_09

python小程序加滚动条_python小程序加滚动条_10

for循坏

五、给index,item起名字

再多次使用wx:for的时候,会多次产生item,为了减少item的混杂,就起个名字,看下面第一行

python小程序加滚动条_绝对路径_11

模板

六、小程序中模板的使用

定义template标签,里面装的就是模板,然后再标签内定义name标签,表示这个模板的名字,然后拿来用的时候,就使用这个template标签然后 is 里面使用的模板就是名字,代表使用哪一个模板,然后data里面是数据,使用方法看下面

python小程序加滚动条_递归_12


导入模板的两种方式,递归导入的意思是再模板中导入模板

python小程序加滚动条_python小程序加滚动条_13

WXS

六、WXS的了解其实用法跟vue里面的计算属性类似,js中定义一个return的方法,然后再wxml中使用就可以了

python小程序加滚动条_绝对路径_14



python小程序加滚动条_绝对路径_15


python小程序加滚动条_绝对路径_16


但它真正使用方式是这样的

python小程序加滚动条_python小程序加滚动条_17


然后使用wxs里面的东西

python小程序加滚动条_python小程序加滚动条_18


但一般不会这么复杂的放到wxml里面,会把它提取出来,创一个wxs目录,专门存放wxs,然后再里面创建一个wxs类型的文件,把wxs组件里面的内容放进去

然后下面就写出如何导入wxs文件和使用,(再导入时候,还需要使用module起一个名字)只能使用绝对路径

python小程序加滚动条_xml_19