微信小程序作品实例

article/2025/9/18 17:06:23

目录

简介

作品详情

作品代码

一、主页界面

1、WXML文件:

2、WXSS文件:

3、JS文件

4、JSON文件:

5、补充 

二、购物车界面

 1、WXML文件

 3、JS文件

 4、JSON文件

三、分类界面和个人中心界面

简介

        这是我在学习完微信小程序后，写的一个小案例，是一个关于女性商品的，数据也是自己通过数组写的死数据。这是学习完vue之后才学习的，感觉和vue很像，导致我自己的懒癌犯了，学不进去了，就大致了解之后就上手了，因为写的比较简单，部分我感觉重复的功能也没有写。所有整体来说写的还是比较顺利。

作品详情

        这个作品我写了四个页面，分别是首页、分类、购物车、个人中心。其中主页和个人中心页面的功能，相对其它两个页面来说更多一点。

        在作品中我使用了一个插件库Lin UI，但是我感觉功能一般，所有大家可以使用其他的

微信小程序插件库

作品代码

一、主页界面

1、WXML文件:

<!--pages/home/home.wxml-->
<!--轮播图-->
<view class="swiper-container"><swiper indicator-dots="{{true}}" autoplay interval="3000" duration="1500" circular class="swiper"><swiper-item class="lun"><image mode="scaleToFill" src="/images/carousel/carousel-1 .jpg"></image></swiper-item><swiper-item class="lun"><image mode="scaleToFill" src="/images/carousel/carousel-2.jpg"></image></swiper-item><swiper-item class="lun"><image mode="scaleToFill" src="/images/carousel/carousel-3.jpg"></image></swiper-item></swiper>
</view>
<view class="brand-title"><text>品牌推荐</text>
</view>
<view class="container">
<!--循环遍历数组grids1中的品牌数据展示到界面上--><view wx:for="{{grids1}}" wx:key="idx" wx:for-index="idx" wx:for-item="item" class="container-grid"><view class="sort-grid"><image mode="widthFix" src="{{item.src}}"></image><view class="">{{item.text}}</view></view></view>
</view>
<!--商品推荐-->
<view class=""><image src="/images/fashion/fashion.png" mode="scaleToFill" class="fashion" /><view class="fashion-brand">
<!--循环遍历数组grids2中的商品数据展示到界面上--><view wx:for="{{grids2}}" wx:key="idx" wx:for-item="item" class="brand-holder"><image mode="widthFix" src="{{item.src1}}" class="holder-src1"></image><view class="brand-logo-holder"><image mode="widthFix" src="{{item.src2}}" class="holder-src2"></image></view><view class="siding"><text>2023新款优雅打揽千鸟格舒适显瘦百搭女装</text><text style="font-size: 30rpx; padding-top: 10rpx; color: rgb(241, 6, 124); font-weight: 700;">{{item.text2}}</text></view><view class="brand-price"><l-price unit="￥" value="666" class="price" color="#000"></l-price><button plain="{{falsh}}" class="holder-button" style="width: 110rpx;height: 30rpx; line-height: 10rpx;" bindtap="buy" data-id="{{item.idx}}"><view style="font-size: 10rpx;">加入购物车</view></button></view></view></view>
</view>

2、WXSS文件:

/* pages/home/home.wxss */.lun image {width: 750rpx;height: 300rpx;
}.swiper-container {margin-bottom: 14rpx;
}.brand-title {font-size: 40rpx;font-weight: 600;margin: 25rpx 20rpx;
}.brand-title text {display: block;text-align: center;
}.container {width: 95%;display: flex;margin: auto;flex-wrap: wrap;justify-content: space-around;border-left: 1rpx solid #dddddd;border-top: 1rpx solid #dddddd;
}.container-grid {width: 33%;border-bottom: 1rpx solid #dddddd;border-right: 1rpx solid #dddddd;
}.sort-grid {text-align: center;margin-top: 25rpx;margin-bottom: 25rpx;font-size: 16rpx;
}.sort-grid image {width: 50%;
}.fashion {width: 760rpx;height: 100rpx;
}.fashion-brand {display: flex;flex-wrap: wrap;margin: 40rpx;justify-content: space-around;font-size: 10rpx;text-align: center;
}.brand-holder {margin: 20rpx;position: relative;width: 230rpx;height: 420rpx;border: 1px solid #dddddd;
}.holder-src1 {width: 230rpx;
}.brand-logo-holder {width: 52rpx;height: 28rpx;position: absolute;background-color: #fff;border: 1px solid #dddddd;top: 50%;left: 50%;transform: translate(-50%, -50%);
}.holder-src2 {position: absolute;width: 60rpx;/* height: 20rpx; */top: 50%;left: 50%;transform: translate(-50%, -50%);
}.siding text {display: block;margin: auto;width: 200rpx;font-size: 20rpx;color: #818181;
}.siding text {display: block;margin: auto;width: 200rpx;font-size: 20rpx;color: #818181;
}.holder-button {color: #ec0973;width: 60rpx;height: 18rpx;line-height: 2rpx;padding: 10rpx 10rpx;border: 1rpx solid #ec0973;
}.brand-price {display: flex;margin-top: 10%;margin-left: 5%;line-height: -1rpx;
}.brand-holder:hover {border: 1rpx solid #ec0973;
}.brand-holder:hover .holder-button {color: #fff;background-color: #ec0973;
}

3、JS文件

// pages/home/home.js
Page({/*** 页面的初始数据*/data: {grids1: [{src: "/images/sort/sort-1.png",text: "恩裳",idx: 0},{src: "/images/sort/sort-2.png",text: "音儿",idx: 1},{src: "/images/sort/sort-3.png",text: "波司登",idx: 2}, {src: "/images/sort/sort-4.png",text: "诗篇",idx: 3}, {src: "/images/sort/sort-5.png",text: "哥弟",idx: 4}, {src: "/images/sort/sort-6.png",text: "富挺",idx: 5}, {src: "/images/sort/sort-7.png",text: "罗蒙",idx: 6}, {src: "/images/sort/sort-8.png",text: "米皇",idx: 7}, {src: "/images/sort/sort-9.png",text: "天美意",idx: 8}],grids2: [{src1: "/images/fashion/fashion-1.png",src2: "/images/fashion/fashion-icon-1.png",text1: "对白女装疯抢专场",text2: "三折封顶",idx: 0}, {src1: "/images/fashion/fashion-2.png",src2: "/images/fashion/fashion-icon-2.png",text1: "对白女装疯抢专场",text2: "三折封顶",idx: 1}, {src1: "/images/fashion/fashion-3.png",src2: "/images/fashion/fashion-icon-3.png",text1: "对白女装疯抢专场",text2: "三折封顶",idx: 2}, {src1: "/images/fashion/fashion-4.png",src2: "/images/fashion/fashion-icon-4.png",text1: "对白女装疯抢专场",text2: "三折封顶",idx: 3}, {src1: "/images/fashion/fashion-5.png",src2: "/images/fashion/fashion-icon-5.png",text1: "对白女装疯抢专场",text2: "三折封顶",idx: 4}, {src1: "/images/fashion/fashion-6.png",src2: "/images/fashion/fashion-icon-6.png",text1: "对白女装疯抢专场",text2: "三折封顶",idx: 5}, {src1: "/images/fashion/fashion-7.png",src2: "/images/fashion/fashion-icon-7.png",text1: "对白女装疯抢专场",text2: "三折封顶",idx: 6}, {src1: "/images/fashion/fashion-8.png",src2: "/images/fashion/fashion-icon-8.png",text1: "对白女装疯抢专场",text2: "三折封顶",idx: 7}, {src1: "/images/fashion/fashion-9.png",src2: "/images/fashion/fashion-icon-9.png",text1: "对白女装疯抢专场",text2: "三折封顶",idx: 8}, {src1: "/images/fashion/fashion-10.png",src2: "/images/fashion/fashion-icon-10.png",text1: "对白女装疯抢专场",text2: "三折封顶",idx: 9}, {src1: "/images/fashion/fashion-11.png",src2: "/images/fashion/fashion-icon-11.png",text1: "对白女装疯抢专场",text2: "三折封顶",idx: 10}, {src1: "/images/fashion/fashion-12.png",src2: "/images/fashion/fashion-icon-12.png",text1: "对白女装疯抢专场",text2: "三折封顶",idx: 11}],cart: []},// 点击事件buy(event) {const grids2 = this.data.grids2;let id = event.currentTarget.dataset.id;var app = getApp();const cartData = app.globalData.cartData;let nums = 0;for (let i = 0; i < grids2.length; i++) {// 在循环过程中操作每个数组项const item = grids2[i];if (cartData.length != 0 && id == grids2[i].idx) {for (let i = 0; i < cartData.length; i++) {console.log("id:" + id, cartData[i].id);if (id == cartData[i].id) {//购物车里面有数据，且选中的商品在购物车中，商品数加一cartData[i].nums += 1;break;}if (id != cartData[i].id && i == cartData.length - 1) {//购物车里面有数据，且选中的商品不在购物车中，添加商品cartData.push({id: id,isChecked: false,nums: nums + 1,item})break;}}} else {if (id == grids2[i].idx) {cartData.push({id: id,isChecked: false,nums: nums + 1,item}); // 向全局数组中添加新的项}}}console.log(cartData);},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

4、JSON文件:

//注册需要用的的组件
{"usingComponents": {"l-button": "/miniprogram_npm/lin-ui/button/index","l-icon": "/miniprogram_npm/lin-ui/icon/index","l-price": "/miniprogram_npm/lin-ui/price/index","l-grid": "/miniprogram_npm/lin-ui/grid/index","l-grid-item": "/miniprogram_npm/lin-ui/grid-item/index"}
}

5、补充 

同时为了和购物车界面发生数据交互，我在app.js中声明了一个数组，用来传递数据

app.js

// app.js
App({onLaunch() {// 展示本地存储能力const logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)// 登录wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionId}})},// userInfo: null,globalData: {
//声明全局数组，传递数据cartData: []}
})

二、购物车界面

 

        购物车界面的功能相对来说还是比较好一点的，全选、单选，都有逻辑判断，就是那个件数我用的组件，所以功能只是虚假的并没有改变本地数组里面的值。只是界面自身的渲染，     

 1、WXML文件

<!--pages/cart/cart.wxml-->
<view class="add">
<!--用 wx:if 进行判断，有商品和没有商品展示不同的界面--><view wx:if="{{cart}}" class="add-cart"><!--购物车为空--><image src="/images/my/cart-empty.png" mode="widthFix" /><view class="add-text"><text>购物车空空如也，去逛逛吧~~</text></view></view><view wx:if="{{!cart}}"><!--购物车里面有商品--><view style="padding-bottom: 12%;"><l-checkbox-group><l-checkbox key="{{item.id}}" checked="{{item.isChecked}}" wx:for="{{cartData}}" wx:key="id" wx:for-item="item" class="product" bindtap="Single" data-id="{{item.id}}" selected-color="blue"><image src="{{item.item.src1}}" mode="widthFix" /><l-counter count="{{item.nums}}" min="1" max="10" /><l-button type="error" shape="semicircle" width="120" height="60" class="sanchu" bindtap="Delete" data-id="{{item.id}}">删除</l-button></l-checkbox></l-checkbox-group></view><view class="settle"><l-checkbox-group bind:linchange="onChangeTap" class="select"><l-checkbox key="1" selected-color="blue" checked="{{Checked}}">全选</l-checkbox></l-checkbox-group><view class="total">合计：<l-price unit="￥" value="0"></l-price></view><l-button type="error" shape="semicircle" width="120" height="60">结算</l-button></view></view>
</view>

 2、WSXX文件

/* pages/cart/cart.wxss */
page {background-color: #f5f5f5;
}.add {width: 100%;
}.add-cart {align-items: center;
}.add-cart image {width: 400rpx;margin-left: 50%;margin-top: 50%;transform: translate(-50%, -50%);}.add-text {align-items: center;width: 65%;
}.add-text text {display: block;font-size: 40rpx;margin-left: 20%;transform: translate(25%, -100%);
}.product {display: flex;width: 100%;margin: 15rpx;border-radius: 20rpx;background-color: #ffffff;
}.product image {width: 200rpx;margin-left: 5%;margin-right: 12%;
}.sanchu {margin-left: 3%;
}.settle {position: fixed;width: 100%;padding: 10rpx;bottom: 0%;display: flex;height: 60rpx;border-top: 1rpx solid #e8e8e8;background-color: #ffffff;}.select {height: 60rpx;line-height: 65rpx;
}.total {padding: 10rpx;margin-left: 20rpx;width: 400rpx;
}

 3、JS文件

// pages/cart/cart.js
Page({/*** 页面的初始数据*//*** cartData: [],    用来储存商品数据* cart: true,      修改展示的内容* Checked: false   判断商品是否选中*/data: {cartData: [],cart: true,Checked: false},onChangeTap: function (event) {// 处理 "linchange" 事件的逻辑代码var app = getApp();const cartData = app.globalData.cartData;//获取加入购物车的数据并赋值给cartDatafor (let i = 0; i < cartData.length; i++) {
//循环数组，如果按钮选中就改为取消，未选就改为选中if (this.data.Checked == false) {cartData[i].isChecked = true;} else {cartData[i].isChecked = false;}}
//变成响应式数据this.setData({Checked: !this.data.Checked,cartData: cartData});},Single(event) {
//全选按钮const id = event.currentTarget.dataset.id;var app = getApp();const cartData = app.globalData.cartData;for (let i = 0; i < cartData.length; i++) {if (id == cartData[i].id) {cartData[i].isChecked = !cartData[i].isChecked;}if (cartData[i].isChecked == false) {this.data.Checked = false}}// 判断数组中的所有对象的 isChecked 属性是否全部为 trueconst allTrue = cartData.every(item => item.isChecked === true);// 如果所有对象的 isChecked 属性都为false，则将它们的值改为trueif (allTrue) {cartData.forEach(item => {this.data.Checked = true;});}this.setData({Checked: this.data.Checked,cartData: cartData});},Delete(event) {const id = event.currentTarget.dataset.id;var app = getApp();const cartData = app.globalData.cartData;for (let i = 0; i < cartData.length; i++) {if (id == cartData[i].id) {cartData.splice(i, 1); // 删除索引为i的元素break; // 停止遍历，因为已经找到并删除了对应的元素}}this.setData({cartData: cartData});},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {
//进入界面的时候进行判断，看看满足不满足全选条件var app = getApp();const cartData = app.globalData.cartData;if (cartData.length === 0) {this.data.cart = true;} else {this.data.cart = false;}for (let i = 0; i < cartData.length; i++) {if (cartData[i].isChecked == false) {this.data.Checked = false}}this.setData({cartData,Checked: this.data.Checked,cart: this.data.cart})},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

 4、JSON文件

{"usingComponents": {"l-search-bar": "/miniprogram_npm/lin-ui/search-bar/index","l-icon": "/miniprogram_npm/lin-ui/icon/index","l-index-list": "/miniprogram_npm/lin-ui/index-list/index"}
}

三、分类界面和个人中心界面

     这两个界面写的比较简单个人中心界面上没有啥功能，分类上面实现一个功能我还是比较满意的，就是分类商品的展示问题，这个我思考了好一会，想找个组件用但是没有找到，然后就想到了一个办法，就是点击分类的名称时在JS中处理数据，将对应的数据放到一个新的空数组里面，然后进行展示。

        分类界面：红框包裹起来的部分循环的是两个不同的数组

 代码比较简单，就不展示啦


http://chatgpt.dhexx.cn/article/VNkHS1xN.shtml

相关文章

微信小程序开发之——微信小程序示例

微信小程序开发之——微信小程序示例

一 概述 除了WeUI组件库&#xff0c;官方进行了扩展&#xff0c;包含组件库、扩展能力、接口和云开发示例 项目地址在线预览码预览界面miniprogram-demo 二 如何使用小程序示例 2.1 小程序示例——tabs 官方示例下的tabs位置 miniprogram-demo-master\miniprogram\page\we…
阅读更多...
微信小程序相关操作示例

微信小程序相关操作示例

微信小程序相关操作示例 wxml-写页面for指令绑定事件数据绑定获取当前用户相关信息的方式跳转展示用户信息表单提交键盘输入的控制 js-写方法初始数据&#xff08;字典&#xff09;&#xff1a;方法函数&#xff1a;存储图片到云开发平台存储访问服务器的request方式获取当前用…
阅读更多...
小程序-demo：小程序示例

小程序-demo：小程序示例

ylbtech-小程序-demo&#xff1a;小程序示例 1.返回顶部 0、 1、app.js const openIdUrl require(./config).openIdUrlApp({onLaunch: function () {console.log(App Launch)},onShow: function () {console.log(App Show)},onHide: function () {console.log(App Hide)},glo…
阅读更多...
Toast与Snackbar的那点事

Toast与Snackbar的那点事

背景 Toast是Android平台上的常用技术。从用户角度来看&#xff0c;Toast是用户与App交互最基本的提示控件&#xff1b;从开发者角度来看&#xff0c;Toast是开发过程中常用的调试手段之一。此外&#xff0c;Toast语法也非常简单&#xff0c;仅需一行代码。基于简单易用的优点…
阅读更多...
Flutter之SnackBar原理详解

Flutter之SnackBar原理详解

初次学习SnackBar控件&#xff0c;第一反应就是这货怎么感觉跟Android的Toast一样&#xff01;使用起来确实简单&#xff0c;但是其内部原理扒拉出来到时能学到一点东西&#xff0c;下面就细细的剖析这个组件。 Snackbar的作用就是在屏幕的底部展示一个简短的消息,与此同时&am…
阅读更多...
Android Material Design 系列之 Snackbar 使用详解

Android Material Design 系列之 Snackbar 使用详解

前言 本文是 Material Design 系列第二篇&#xff1a;SnackBar 的提出实际上介于 Toast 和 Dialog 的中间产物&#xff0c;SnackBar 提供有关操作的轻量级反馈&#xff0c;它们在移动设备的屏幕底部显示一条简短消息。SnackBar 出现在屏幕上所有其他元素的上方&#xff0c;一次…
阅读更多...
Android中Snackbar的介绍以及使用

Android中Snackbar的介绍以及使用

Android中Snackbar的介绍以及使用 介绍 Snackbar可以说是Toast的升级版&#xff0c;不仅有显示信息的功能&#xff0c;还可以添加一个Action&#xff0c;实现点击功能&#xff0c;可以右滑删除。 效果图 Snackbar是Android Support Design Library库支持的一个控件&#xff0c…
阅读更多...
安卓之SnackBar

安卓之SnackBar

SnackBar SnakeBar与Toast相似&#xff0c;不过SnakeBar可以与用户进行交互。 不过首先需要在app/bulid.gradle中添加一句依赖&#xff0c;操作方法如下 点击这个灯泡&#xff0c;选择Add Library dependency然后添加下面的依赖 implementation com.android.support:design:2…
阅读更多...
使用Snackbar!——Android Snackbar花式使用指南

使用Snackbar!——Android Snackbar花式使用指南

使用Snackbar!——Android Snackbar花式使用指南 本文是在《Design Support Library第三部分&#xff1a;Snackbar样式》和《Snackbar使用及其注意事项》两篇文章的启发下而来&#xff0c;首先对两篇文章的作者表示感谢。 Snackbar是Android Support Design Library库中的一个控…
阅读更多...
Android 中的自定义 Snackbar

Android 中的自定义 Snackbar

前言 Snackbars 在 Android 应用程序中很常见。几乎每个应用程序都使用 Snackbars 来显示有关应用程序中正在发生的事情的一些信息。您可以将 Snackbar 视为 Android 中 Toasts 的替代品或更好的版本。 默认情况下&#xff0c;Snackbar 显示在屏幕底部&#xff0c;它出现在屏…
阅读更多...
Snackbar的使用

Snackbar的使用

最近看到Material Design中的Snackbar&#xff0c;跟Toast很相似。似乎效果比原生的Toast好写(当然我们也可以自定义Toast成Snackbar的效果)&#xff0c;至于Snackbar特别深入的定制目前了解甚少&#xff0c;所以这里简单记录一下常用的。 效果图 下面看一下效果 这里面加了个…
阅读更多...
Android Snackbar控件

Android Snackbar控件

1. Snackbar类 Snackbar是5.0版本出现的控件&#xff0c;类似于Toast&#xff0c;显示在屏幕的底部&#xff0c;包含文字信息与一个可选的操作按钮。需要添加Design依赖库&#xff0c;并且使用Theme.AppCompat主题。 2. 创建Snackbar类 Snackbar利用静态方法make()来创建实…
阅读更多...
Android Snackbar简单解析

Android Snackbar简单解析

偶然间发现android中有Snackbar类&#xff0c;还是有点意思&#xff0c;类似于toast。与toast相比&#xff0c;最明显的区别是:Snackbar只能在屏幕底部显示。其他用法基本与toast相似。 先来张效果图吧&#xff0c;静态图&#xff1a; 大概的用法呢&#xff1f;&#xff1a; S…
阅读更多...
android Snackbar新控件解析

android Snackbar新控件解析

Dialog和Toast&#xff0c;我们在日常的开发中一定非常熟悉&#xff0c;常常被用来作为Android应用内提示性信息的两种展示方式。然而Google在Design包中又提供了一种新的选择&#xff0c;那就是Snackbar。今天主要介绍Snackbar新控件的使用&#xff0c;以及三种提示信息展示方…
阅读更多...
android开发之SnackBar的使用

android开发之SnackBar的使用

SnackBar是一个类似于Toast的东西&#xff0c;它也有显示时长&#xff0c;但是比Toast更加灵活&#xff0c;同时&#xff0c;我们还可以给SnackBar设置点击事件&#xff0c;那么我们今天就来看看怎么用吧&#xff01; 先来一张效果图&#xff1a; 这种效果大家可能在一些App中…
阅读更多...
Snackbar-Android M新控件

Snackbar-Android M新控件

概述 查看官方API Snackbar 是 Android design support library 中的另一个组件。使用 Snackbar&#xff0c;可以在屏幕底部快速的显示一条消息&#xff0c;大体与 Toast 相同&#xff0c;但多了几分灵活性&#xff1a; 一小段时间之后、或者用户与屏幕触发交互&#xff0c;S…
阅读更多...
Android Snackbar使用方法及小技巧-design

Android Snackbar使用方法及小技巧-design

Snackbar和Toast相似&#xff0c;都是为了给用户提供交互信息&#xff0c;Snackbar是固定在底部的&#xff0c;显示时从下往上滑出 要使用Snackbar&#xff0c;需要在项目的build.gradle中添加依赖 dependencies {compile com.android.support:design:23.4.0 } Snackbar的使用…
阅读更多...
Android 快别用Toast了，来试试Snackbar

Android 快别用Toast了，来试试Snackbar

&#x1f525; 应用场景 Toast提示默认显示在界面底部&#xff0c;使用Toast.setGravity()将提示显示在中间&#xff0c;如下&#xff1a; Toast toast Toast.makeText(this, str, Toast.LENGTH_SHORT);toast.setGravity(Gravity.CENTER, 0, 0);toast.show();运行在在Android …
阅读更多...
Android---简易Snackbar

Android---简易Snackbar

目录 Snackbar 简介 Snackbar 特性 完整Demo Snackbar 简介 Snackbar 是 Android5.0 新特性---Material Design 中的一个控件&#xff0c;用来代替 Toast。Snackbar 就是一个类似 Toast 的快速弹出消息提示的控件&#xff0c;手机上显示在底部&#xff0c;大屏幕设备显示在左…
阅读更多...
Android Snackbar基本使用

Android Snackbar基本使用

概述 Snackbar 是 Android 5.0 新特性——Material Design 中的一个控件&#xff0c;用来代替 Toast &#xff0c;Snackbar与Toast的主要区别是&#xff1a;Snackbar可以滑动退出&#xff0c;也可以处理用户交互&#xff08;点击&#xff09;事件。 样式 使用 Snackbar需要配…
阅读更多...
推荐文章

Copyright @ 2022~2023