微信小程序学习（四）

尘似鹤2025-10-06 16:41

常用组件详解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'
    });
  }
});

效果：

相关推荐
正经教主7 分钟前
【Trae+AI】和Trae学习搭建App_02：后端API开发
学习·app·1024程序员节
源代码•宸14 分钟前
Qt6 学习——一个Qt桌面应用程序
开发语言·c++·经验分享·qt·学习·软件构建·windeployqt
讽刺人生Yan1 小时前
RFSOC学习记录（一）RF data converter总览
学习·fpga开发·rfsoc
Pluchon2 小时前
硅基计划2.0 学习总结 玖 图书管理系统 2.0复盘版（文字末尾源码可复制）
java·学习·项目·源码可复制
charlie1145141912 小时前
2D 计算机图形学基础速建——1
笔记·学习·教程·计算机图形学·基础
im_AMBER2 小时前
React 07
前端·笔记·学习·react.js·前端框架
赣州云智科技的技术铺子2 小时前
【一步步开发AI运动APP】十三、如何进行运动开始前的站位预检，提升用户体验
微信小程序·小程序·云开发·智能小程序
on_pluto_3 小时前
GAN生成对抗网络学习-例子：生成逼真手写数字图
人工智能·深度学习·神经网络·学习·算法·机器学习·生成对抗网络
终焉代码4 小时前
【Linux】进程初阶(1)——基本进程理解
linux·运维·服务器·c++·学习·1024程序员节
喵了meme5 小时前
Linux学习日记6：文件IO与标准IO
linux·c语言·学习
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03UV安装并设置国内源04Burp与其他安全工具联动及代理设置教程05Linux下V2Ray安装配置指南06GitLab 零基础入门指南：从安装到项目管理全流程07jdk21下载、安装（Windows、Linux、macOS）08Ubuntu22.04安装freecad、ODAFileConverter09Labelme从安装到标注：零基础完整指南10NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南