微信小程序学习之第五天(scroll-view,rpx,block标签, for循坏,模板,WXS语言)

局部滚动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、绑定滚动事件,再滚动就触发
在这里插入图片描述
然后返回的参数
在这里插入图片描述
2、其他事件

在这里插入图片描述
在这里插入图片描述

rpx

二、rpx的使用
由于px是固定的大小,当手机屏幕大小发发生改变时候,无法做到自适应,但是rpx就可以,会随着屏幕大小做相对的增大和缩小,以下为如何通过px计算rpx
在这里插入图片描述
三、Mustache语法的一些细节操作
在这里插入图片描述
第一个三目判断。
第二个通过js那边通过load方法里设置一个定时器实时刷新获取时间。
第三给绑定class。
四、hidden属性
在这里插入图片描述
在这里插入图片描述

block标签

五、block标签
通常我们犹如下面这些标签这样子使用,对多个标签进行if或者for操作的时候,可以使用block,因为它只是一个标签,不渲染的
我们要在这里插入图片描述

for循坏

五、给index,item起名字
再多次使用wx:for的时候,会多次产生item,为了减少item的混杂,就起个名字,看下面第一行
在这里插入图片描述

模板

六、小程序中模板的使用
定义template标签,里面装的就是模板,然后再标签内定义name标签,表示这个模板的名字,然后拿来用的时候,就使用这个template标签然后 is 里面使用的模板就是名字,代表使用哪一个模板,然后data里面是数据,使用方法看下面
在这里插入图片描述
导入模板的两种方式,递归导入的意思是再模板中导入模板
在这里插入图片描述

WXS

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

在这里插入图片描述
在这里插入图片描述
但它真正使用方式是这样的
在这里插入图片描述
然后使用wxs里面的东西
在这里插入图片描述
但一般不会这么复杂的放到wxml里面,会把它提取出来,创一个wxs目录,专门存放wxs,然后再里面创建一个wxs类型的文件,把wxs组件里面的内容放进去
然后下面就写出如何导入wxs文件和使用,(再导入时候,还需要使用module起一个名字)只能使用绝对路径
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据提供的引用内容,实现微信小程序 scroll-viewscroll-into-view 无效果可能是由以下几个原因导致的: 1. scroll-into-view 属性的值与要跳转到的锚点标记的 id 属性值一致。例如,如果要跳转到一个 id 为 "anchor1" 的锚点标记,那么 scroll-into-view 的值应该设置为 "anchor1"。 2. scroll-view 容器高度不足:如果 scroll-view 容器的高度不足以显示要跳转到的锚点标记,那么 scroll-into-view 将无法生效。确保 scroll-view 容器的高度足够大,以容纳所有的内容和要跳转到的锚点标记。 3. scroll-into-view 设置在子组件上:scroll-into-view 属性应该设置在 scroll-view 组件上,而不是其子组件上。确保 scroll-into-view 属性被正确地设置在 scroll-view 组件上。 4. scroll-into-view 设置在动态生成的内容上:如果要跳转到的锚点标记是在动态生成的内容,那么需要在动态生成内容之后再设置 scroll-into-view 属性。因为 scroll-into-view 属性需要等待内容渲染完成后才能生效。 5. scroll-into-view 设置在隐藏的内容上:如果要跳转到的锚点标记是在初始状态下是隐藏的内容,那么需要在显示该内容后再设置 scroll-into-view 属性。因为 scroll-into-view 属性需要等待内容显示后才能生效。 以下是一个示例代码,演示了如何在微信小程序使用 scroll-viewscroll-into-view 实现锚点跳转效果: ```html <scroll-view scroll-into-view="{{toView}}" scroll-y="true" style="height: 300px;"> <view id="anchor1">锚点1</view> <view id="anchor2">锚点2</view> <view id="anchor3">锚点3</view> <view id="anchor4">锚点4</view> <view id="anchor5">锚点5</view> </scroll-view> <button bindtap="scrollToAnchor">跳转到锚点2</button> ``` ```javascript Page({ data: { toView: '' }, scrollToAnchor: function() { this.setData({ toView: 'anchor2' }) } }) ``` 在上述示例scroll-view 组件设置了 scroll-into-view 属性为 toView 变量的值,当点击按钮时,toView 变量的值被设置为 "anchor2",从而实现了跳转到锚点2的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值