常用组件详解https://blog.csdn.net/qq_38060125/article/details/149577955
swiper
WXML
html
<view class="container">
<swiper indicator-dots="true" autoplay="true" interval="3000" style="height: 300px; width: 100%;">
<swiper-item>
<image src="https://ts1.tc.mm.bing.net/th/id/OIP-C.RzU5hR-mzlIYuMuEGi-RpQHaJE?w=156&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2" style="width: 100%; height: 100%; object-fit: cover;" />
</swiper-item>
<swiper-item>
<image src="https://ts1.tc.mm.bing.net/th/id/OIP-C.pRVKlm5kgzxD2GbMXdE5YAHaGu?w=203&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2" style="width: 100%; height: 100%; object-fit: cover;" />
</swiper-item>
<swiper-item>
<image src="https://tse2-mm.cn.bing.net/th/id/OIP-C.Jbm1xujyMshAY49FIOVEBgHaIH?w=199&h=218&c=7&r=0&o=7&pid=1.7&rm=3" style="width: 100%; height: 100%; object-fit: cover;" />
</swiper-item>
</swiper>
</view>
indicator-dots
:是否显示指示点autoplay
:是否自动播放interval
:自动播放间隔时间duration
:滑动动画持续时间
要用<swiper-item>包裹起来,不然无效!连接的示例也是。
效果:

📝 练习任务
使用 swiper
实现一个商品详情页的轮播图展示
这里其实就是上边的示例,只不过增加了文本,并且将数据挪到了JS里。
WXML
html
<view class="product-detail-container">
<!-- 商品图片轮播 -->
<swiper indicator-dots="true" autoplay="true" interval="3000" class="product-swiper">
<swiper-item wx:for="{{productItems}}" wx:key="index">
<view class="swiper-content">
<image src="{{item.image}}" class="swiper-image" />
<text class="swiper-text">{{item.text}}</text>
</view>
</swiper-item>
</swiper>
</view>
JS
cpp
Page({
data: {
// 商品图片及文字数据
productItems: [
{
image: "https://ts1.tc.mm.bing.net/th/id/OIP-C.RzU5hR-mzlIYuMuEGi-RpQHaJE?w=156&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2",
text: "商品图片1 - 高质量精选商品"
},
{
image: "https://ts1.tc.mm.bing.net/th/id/OIP-C.pRVKlm5kgzxD2GbMXdE5YAHaGu?w=203&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2",
text: "商品图片2 - 性价比之选"
},
{
image: "https://tse2-mm.cn.bing.net/th/id/OIP-C.Jbm1xujyMshAY49FIOVEBgHaIH?w=199&h=218&c=7&r=0&o=7&pid=1.7&rm=3",
text: "商品图片3 - 独家推荐"
}
]
}
});
效果如上图,只不过多了文字在下方。
WXSS
css
/* 商品详情页样式 */
.product-detail-container {
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
width: 100vw;
height: 100vh;
}
/* 轮播容器样式 */
.product-swiper {
width: 100%;
height: 350px; /* 图片与文字的整体高度 */
bottom: 60px;
}
.custom-swiper {
width: 100%;
height: 300px;
padding-bottom: 20px; /* 增加额外的底部间距,移动指示点 */
}
/* 每个轮播项的内容样式 */
.swiper-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 92%;
}
/* 图片样式 */
.swiper-image {
width: 100%;
height: 300px; /* 图片高度 */
object-fit: cover;
}
/* 文字样式 */
.swiper-text {
font-size: 16px;
color: #333;
margin-top: 10px;
text-align: center;
}
构建一个带图标和提示的搜索框界面
WXML
html
<view class="search-container">
<!-- 搜索框 -->
<view class="search-box">
<image src="/assets/search-icon.png" class="search-icon" />
<input
class="search-input"
placeholder="请输入搜索内容"
bindinput="onSearchInput" />
</view>
</view>
WXSS
css
/* 搜索框外层容器样式 */
.search-container {
width: 100%; /* 占满页面宽度 */
padding: 10px 15px; /* 搜索框上下左右内边距 */
background-color: #f5f5f5; /* 背景色 */
box-sizing: border-box; /* 防止宽度增加 */
}
/* 搜索框样式 */
.search-box {
display: flex;
align-items: center; /* 图标和文本垂直居中 */
background-color: #fff; /* 搜索框背景色 */
border-radius: 20px; /* 圆角 */
padding: 5px 10px; /* 内边距控制输入框和图标的间距 */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加细微阴影提升视觉层次 */
}
/* 搜索图标样式 */
.search-icon {
width: 20px; /* 图标宽度 */
height: 20px; /* 图标高度 */
margin-right: 10px; /* 图标与输入框的间距 */
}
/* 输入框样式 */
.search-input {
flex: 1; /* 使输入框占满剩余宽度 */
border: none; /* 去掉默认边框 */
outline: none; /* 去掉输入框的点击高亮效果 */
font-size: 16px; /* 文本大小 */
color: #333; /* 文本颜色 */
background-color: transparent; /* 背景透明,继承父级样式 */
}
JS
javascript
Page({
data: {
searchValue: "", // 当前搜索框的内容
},
// 监听用户输入
onSearchInput(e) {
this.setData({
searchValue: e.detail.value, // 获取输入框内容
});
console.log("搜索框内容:", e.detail.value); // 输出搜索框内容
},
});
效果:

使用 scroll-view
实现一个垂直滚动的商品展示列表
WXML
javascript
<view class="container">
<!-- 垂直滚动视图 -->
<scroll-view scroll-y="true" class="scroll-view">
<view wx:for="{{productList}}" wx:key="id" class="product-item">
<image src="{{item.image}}" class="product-image" />
<view class="product-info">
<text class="product-name">{{item.name}}</text>
<text class="product-price">{{item.price}}</text>
</view>
</view>
</scroll-view>
</view>
WXSS
css
/* 页面整体样式 */
.container {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
background-color: #f5f5f5;
}
/* 垂直滚动视图样式 */
.scroll-view {
width: 100%;
height: 100%;
padding: 15px;
box-sizing: border-box; /* 防止宽度扩张 */
}
/* 商品每一项样式 */
.product-item {
display: flex;
flex-direction: row; /* 图片和文字横向排列 */
align-items: center;
background-color: #fff;
border-radius: 10px;
padding: 10px;
margin-bottom: 10px; /* 每项之间的间隔 */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 增加阴影效果 */
}
/* 商品图片样式 */
.product-image {
width: 80px; /* 固定图片宽度 */
height: 80px; /* 固定图片高度 */
border-radius: 5px; /* 图片圆角设置 */
margin-right: 10px; /* 图片和信息之间的间距 */
object-fit: cover; /* 使图片保持原比例 */
}
/* 商品信息样式 */
.product-info {
display: flex;
flex-direction: column;
justify-content: center;
}
/* 商品名称样式 */
.product-name {
font-size: 16px;
font-weight: bold;
color: #333;
}
/* 商品价格样式 */
.product-price {
font-size: 14px;
color: #007aff;
margin-top: 5px;
}
JS
javascript
Page({
data: {
// 商品列表数据(包含图片、名称和价格)
productList: [
{
id: 1,
image: "https://ts1.tc.mm.bing.net/th/id/OIP-C.RzU5hR-mzlIYuMuEGi-RpQHaJE?w=156&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2",
name: "商品名称 1",
price: "¥100.00"
},
{
id: 2,
image: "https://ts1.tc.mm.bing.net/th/id/OIP-C.pRVKlm5kgzxD2GbMXdE5YAHaGu?w=203&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2",
name: "商品名称 2",
price: "¥150.00"
},
{
id: 3,
image: "https://tse2.mm.bing.net/th/id/OIP-C.Jbm1xujyMshAY49FIOVEBgHaIH?w=199&h=218&c=7&r=0&o=7&pid=1.7",
name: "商品名称 3",
price: "¥200.00"
},
{
id: 4,
image: "https://tse4-mm.cn.bing.net/th/id/OIP-C.KyVzHnnAMW7FEuP4X3ICNQHaNJ?w=187&h=333&c=7&r=0&o=7&pid=1.7&rm=3",
name: "商品名称 4",
price: "¥300.00"
}
]
}
});
效果:

实现一个登录表单,包含用户名、密码输入框和登录按钮
WXML
html
<view class="login-container">
<!-- 用户名输入框 -->
<view class="form-item">
<text class="form-label">用户名</text>
<input class="form-input" type="text" placeholder="请输入用户名" bindinput="onUsernameInput" value="{{username}}" />
</view>
<!-- 密码输入框 -->
<view class="form-item">
<text class="form-label">密码</text>
<input class="form-input" type="password" placeholder="请输入密码" bindinput="onPasswordInput" value="{{password}}" />
</view>
<!-- 登录按钮 -->
<button class="login-button" bindtap="onLogin">登录</button>
<button class="reset-button" bindtap="onReset">重置</button>
</view>
WXSS
css
/* 页面容器样式 */
.login-container {
display: flex;
flex-direction: column; /* 垂直布局 */
justify-content: center;
align-items: center;
height: 100vh; /* 页面高度充满 */
background-color: #f5f5f5; /* 背景淡灰色 */
}
/* 表单项样式 */
.form-item {
width: 80%; /* 输入框宽度 */
margin-bottom: 15px; /* 每项的间距 */
}
/* 表单标签样式 */
.form-label {
font-size: 16px;
color: #333;
margin-bottom: 5px;
display: block; /* 强制为块状 */
}
/* 输入框样式 */
.form-input {
width: 100%; /* 输入框占满父级宽度 */
height: 40px; /* 输入框固定高度 */
padding: 0 10px; /* 输入框内部文字与边框的距离 */
border: 1px solid #ccc;
border-radius: 5px; /* 边框圆角 */
background-color: #fff; /* 背景白色 */
}
/* 登录按钮样式 */
.login-button {
width: 80%;
height: 40px;
background-color: #007aff; /* 蓝色按钮 */
color: #fff; /* 按钮文字白色 */
font-size: 16px;
border: none; /* 按钮去边框 */
border-radius: 5px;
text-align: center;
}
.login-button:active {
background-color: #0056b3; /* 按压时按钮颜色更深 */
}
/* 重置按钮样式 */
.reset-button {
width: 80%;
height: 40px;
background-color: #ccc; /* 灰色按钮 */
color: #333; /* 黑色文字 */
font-size: 16px;
border: none;
border-radius: 5px;
text-align: center;
margin-top: 10px;
}
.reset-button:active {
background-color: #aaa; /* 按压时按钮颜色更深 */
}
JS
javascript
Page({
data: {
username: "", // 用户名
password: "" // 密码
},
// 监听用户名输入
onUsernameInput(e) {
this.setData({
username: e.detail.value // 动态更新用户名
});
},
// 监听密码输入
onPasswordInput(e) {
this.setData({
password: e.detail.value // 动态更新密码
});
},
// 登录按钮事件
onLogin() {
const { username, password } = this.data; // 获取用户名和密码
console.log("username:",username);
console.log("password:",password);
if (!username || !password) {
wx.showToast({
title: '请输入用户名和密码',
icon: 'none'
});
return;
}
wx.showToast({
title: '登录成功',
icon: 'success'
});
},
onReset(e) {
this.setData({
username: "",
password: ""
});
wx.showToast({
title: '已清空输入框',
icon: 'success'
});
}
});
效果:
