微信小程序学习（四）

常用组件详解https://blog.csdn.net/qq_38060125/article/details/149577955

swiper

WXML

<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

<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

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

/* 商品详情页样式 */
.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

<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

/* 搜索框外层容器样式 */
.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

Page({data: {searchValue: "", // 当前搜索框的内容},// 监听用户输入onSearchInput(e) {this.setData({searchValue: e.detail.value, // 获取输入框内容});console.log("搜索框内容：", e.detail.value); // 输出搜索框内容},
});

效果：

使用 scroll-view 实现一个垂直滚动的商品展示列表

WXML

<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

/* 页面整体样式 */
.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

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

<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

/* 页面容器样式 */
.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

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'});}
});

效果：