返回顶部
首页 > 资讯 > 精选 >小程序swiper怎么根据页面长度滑动
  • 291
分享到

小程序swiper怎么根据页面长度滑动

2024-04-02 19:04:59 291人浏览 薄情痞子
摘要

小程序swiper根据页面长度滑动的案例:在对应的js文件中添加以下代码:get_wxml: function (className, callback) {wx.createSelectorQuer

小程序swiper怎么根据页面长度滑动

小程序swiper根据页面长度滑动的案例:

在对应的js文件中添加以下代码:

get_wxml: function (className, callback) {

wx.createSelectorQuery().selectAll(className).boundinGClientRect(callback).exec()

},

//获取节点信息

this.get_wxml(`#cont` + current, (rects) => {

console.log(rects)

let newHeight = rects[0].height

this.setData({

heights: newHeight 

})

})

在对应的wxml文件中添加以下代码:

<view class="Goods_info_box">

<view class="tba_contain">

<!-- 导航栏 -->

<scroll-view class="tab" scroll-x scroll-left="{{tabScroll}}" scroll-with-animation="true">

<block wx:for="{{menuList}}" wx:key="index">

<view class="tab-item {{currentTab == index ? 'active' : ''}}" data-current="{{index}}" bindtap='clickMenu' style="width:{{100/menuList.length}}%">

<text>{{item.name}}</text>

</view>

</block>

</scroll-view>

<!-- 页面 -->

<swiper class="list_content" duration="500" current="{{currentTab}}" bindchange="changeContent" style="height:{{heights}}px">

<swiper-item class="content-item" wx:for="{{menuList}}" wx:key="index" >

<view >

<text class='reason_txt'> {{item.name}}</text>

</view>

<view id='cont{{index}}' class="swiper-com" style="color:#000;font-size:40rpx;">

<rich-text nodes="{{item.content}}" ></rich-text>

</view>

</swiper-item>

</swiper>

</view>

</view>

--结束END--

本文标题: 小程序swiper怎么根据页面长度滑动

本文链接: https://lsjlt.com/news/116583.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 小程序swiper怎么根据页面长度滑动
    小程序swiper根据页面长度滑动的案例:在对应的js文件中添加以下代码:get_wxml: function (className, callback) {wx.createSelectorQuer...
    99+
    2024-04-02
  • 小程序怎么设置页面滑动
    设置小程序页面滑动的案例:1、需要借助小程序的事件:onPageScroll事件。2、需要借助的API:wx.getSystemInfoSync()。java代码:data :{scrollTop: 0},//监听屏幕滚...
    99+
    2024-04-02
  • 微信小程序用swiper实现滑动刻度尺
    本文实例为大家分享了微信小程序用swiper实现滑动刻度尺的具体代码,供大家参考,具体内容如下 效果图 思路: 利用微信swiper组件实现滑动效果,创建一个数组arr,先存启始数...
    99+
    2024-04-02
  • 微信小程序怎么判断页面滑动方向
    本文小编为大家详细介绍“微信小程序怎么判断页面滑动方向”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序怎么判断页面滑动方向”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。微信小程序判断页面滑动方向解决方案...
    99+
    2023-06-26
  • ios如何禁止小程序页面滑动
    在ios中禁止小程序页面滑动的方法ios需禁止小程序页面滑动,可在对应页面的json文件中写入以下配置即可。{"disableScroll":true}...
    99+
    2024-04-02
  • 小程序如何禁止页面左右滑动
    在小程序页面中添加css样式实现页面左右滑动,具体方法如下:{width:100%; //设置页面宽度为100%overflow-x:hidden; //禁止页面左右滑动}...
    99+
    2024-04-02
  • 小程序音频长度如何显示到页面
    小程序音频长度显示到页面的案例代码:使用开发者工具,在对应页面的js文件中添加:audioPlayed: function () {myAudio.play()setTimeout(() =>&...
    99+
    2024-04-02
  • 微信小程序滑块视图容器swiper怎么用
    这篇“微信小程序滑块视图容器swiper怎么用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“微信小程序滑块视图容器swipe...
    99+
    2023-06-26
  • 微信小程序如何实现页面滑动事件
    这篇文章给大家分享的是有关微信小程序如何实现页面滑动事件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。微信小程序——页面滑动事件wxml: <view ...
    99+
    2024-04-02
  • 微信小程序如何设置页面不可滑动
    在微信小程序中设置页面不可滑动的方法首先,进入微信开发者工具,打开小程序文件目录;在文件目录中,依次查找到test/test.wxml文件,并使用记事本打开;test.wxml文件打开后,使用swiper-item标签包裹所有view;&l...
    99+
    2024-04-02
  • 使用微信小程序实现页面滑动特效
    使用微信小程序实现页面滑动特效随着微信小程序的不断发展,越来越多的开发者开始利用微信小程序开发出各种各样的实用应用。其中,页面滑动特效是一种非常常见且带有一定动感的效果。本文将介绍如何使用微信小程序实现页面滑动特效,并提供具体的代码示例。在...
    99+
    2023-11-21
    微信小程序 特效 页面滑动
  • 小程序页面怎么设计动画
    小程序页面设计动画的方法:利用样式实现小程序动画在对应的wxml文件添加以下代码:<image class="aniamtion" src="../../images/page4.jf...
    99+
    2024-04-02
  • 微信小程序swiper-dot中的点怎么改成滑块
    这篇文章主要介绍“微信小程序swiper-dot中的点怎么改成滑块”,在日常操作中,相信很多人在微信小程序swiper-dot中的点怎么改成滑块问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序swip...
    99+
    2023-06-08
  • 如何动态获取小程序页面的高度
    使用onReady事件动态获取小程序页面的高度实现代码如下:onReady: function () {//动态获取高度this.autoHeight();},//动态获取高度autoHeight:functi...
    99+
    2024-04-02
  • 微信小程序怎么实现swiper高度自适应
    本篇内容主要讲解“微信小程序怎么实现swiper高度自适应 ”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序怎么实现swiper高度自适应 ”吧!要求:swiper高度自适应wxml&l...
    99+
    2023-06-26
  • 微信小程序如何监听手势滑动切换页面
    这篇文章给大家分享的是有关微信小程序如何监听手势滑动切换页面的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。微信小程序 监听手势滑动切换页面实例详解1.对应的xml里写上手势开始、...
    99+
    2024-04-02
  • 微信小程序阻止页面返回(包滑动、自动返回键)
    这个场景还是挺有意思的,比如某多多,只要你点左上角的返回 好家伙,满满又 花不了 的优惠券就来了,让你拥有一种消费最划算的感觉。 如果你的场景比较简单,只是对左上角的返回进行监听,只需要关闭自带的导航栏,手写导航栏或用ui库的写好的导航栏就...
    99+
    2023-09-12
    微信小程序 小程序 vue.js 前端 vue
  • 微信小程序如何实现页面滑动屏幕加载数据效果
    小编给大家分享一下微信小程序如何实现页面滑动屏幕加载数据效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!我们先看看效果图:创建...
    99+
    2024-04-02
  • 微信小程序怎么动态更新页面
    微信小程序动态更新页面的案例:wxml代码: <swiper indicator-dots="{{true}}"  current="{{currentindex}...
    99+
    2024-04-02
  • 怎么开发微信小程序动态页面
    开发微信小程序动态页面的示例:在wxml文件中添加以下代码。<swiper indicator-dots="{{true}}"  current="{{currentinde...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作