<view class="swiperWrap">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" indicator-color="rgba(
原创
2021-04-07 21:19:06
849阅读
布局：<!--pages/swiperdemo/swiperdemo.wxml--><view class="container">
原创
2021-09-16 11:38:49
421阅读
SwiperSwiper是一个滑块容器类组件，主要提供如下的一些属性。
原创
2022-09-07 13:39:28
10000+阅读
JS // pages/classify/swiper.js Page({ /** * 页面的初始数据 */ data: { current:0 }, titleBtn:function(e){ var acIndex = e.currentTarget.dataset.current; this.
转载
2017-11-29 10:36:00
130阅读
1.逻辑层 mine.js 2.页面布局 mine.wxml 3.样式 mine.wxss 4.效果图 5.参数
转载
2018-01-22 19:09:00
216阅读
2评论
微信小程序-- 标签及常见属性demo.wxml<!-- 1 轮播图的外层容器 swiper 2 每
原创
2022-12-20 17:11:39
866阅读
swiper基础库 1.0.0 开始支持，低版本需做兼容处理。滑块视图容器。其中只可
原创
2020-07-08 20:48:42
448阅读
文章目录1.view的使用2.scroll的使用3.swiper的使用4.补充 wx:for的使用1.view的使用viewtest.wxml<!--hover-class:点击后的样式
hover-start-time:按下多久后出现样式，单位毫秒
hover-stay-time:按下后的改变的样式保留多长时间，单位毫秒-->
<view class="box" hover-c
demo.wxml<!-- 1 轮播图的外层容器 swiper 2 每一个轮播项 swiper-item 3 swiper 标签 存在默认样式 1 width 100% 2 height 150px image 存在默认宽度和高度 320 * 240 px 3 swiper 高度 无法实现由内容撑开 4 先找出来 原图的宽度和高度 等比例 给 swiper 定 宽度和高度 原图的宽度和高度 1125 * 352 swiper 宽度 / swi...
原创
2021-08-10 10:36:39
1251阅读
swiper滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。常用属性 autoplay 自动轮播interval 修改轮播时间circular 衔接轮播indicator-dots 显示 指示器 分页器 索引器indicator-color 指示器的未选择时的颜色indicator-active-color 指示器的选中时的颜色属性类型默认值必填说明最低版本
原创
2023-04-03 11:00:01
399阅读
swiper基础库 1.0.0 开始支持，低版本需做兼容处理。滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。属性 类型 默认值 必填 说明 最低版本 indicator-dots boolean false 否 是否显示面板指示点 1.0.0 indicator-color color rgba(0, 0, 0, .3) 否 指示点颜色 1.1.0 indic
原创
2020-07-08 20:48:42
268阅读
# 微信小程序中的 swiper 组件滑动卡顿问题解析与解决方案
在微信小程序开发中，`swiper`组件是一个常用的滑动容器，常用于创建轮播图、照片集等功能。然而，一些开发者在使用`swiper`组件时会遇到滑动卡顿的问题，影响用户体验。本文将分析造成滑动卡顿的原因，并提供相应的解决方案。
## swiper 组件简介
`swiper`是微信小程序提供的原生组件，用于实现滑动切换的效果。它
微信小程序之swiper和swiper-item组件的基本使用，持续更新【微信小程序】系列
推荐
原创
2022-10-02 09:19:23
10000+阅读
点赞
wxml文件<!--1 轮播图外层容器 swiper2 每一个轮播项 swiper-item3 swiper标签 存在默认样式1 width 100%2 height 150px imag
转载
2024-10-24 09:15:48
37阅读
小程序：swiper轮播图添加外层圆角.swiper-wrap{ overflow:
原创
2022-02-12 11:27:12
856阅读
微信小程序：swiper轮播图添加外层圆角.swiper-wrap{ overflow: hidden; border-radius: 8rpx; box-sizing: border-box; width: 100%; transform: translateY(0); // 关键属性 line-height: 1rpx; // 可以简单调整圆点位置}参考微信小程序-swiper轮播图圆角滑动会先直角再圆角的解决办法为什么添加transform: translateY
原创
2021-07-12 10:08:38
1097阅读
<view class="page-section page-section-spacing swiper"> <swiper indicator-dots="{{indicatorDots}}" bindchange="swiperChange" autoplay="{{autoplay}}" i ...
转载
2021-06-15 23:47:13
488阅读
一、前期准备工作软件环境：微信开发者工具 官方下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html1、基本需求。基于swiper组件的tab切换2、案例目录结构二、程序实现具体步骤1.tab切换index.wxml代码<view class="continer">
<!--内容主体-->
原创
2023-06-01 00:21:15
161阅读
方法1： 效果，在模拟工具上是有效果的，真机上没有圆角 解决方案：在 border-radius 后面紧接着加一个 transform: translateY(0); 来暂时解决这个问题。 方法2： -webkit-backface-visibility: hidden; -webkit-trans ...
转载
2021-09-22 19:11:00
638阅读
2评论
十年河东，十年河西，莫欺少年穷 学无止境，精益求精 我随便在京东上找了三个图片作为轮播图，写了如下代码 <swiper> <swiper-item> <image src="https://imgcps.jd.com/img-cubic/creative_server_cia/v2/2000366/
原创
2021-11-01 17:12:22
588阅读
