| uniapp实现购物商城主页面 | 您所在的位置：网站首页 › hbuilderx运行不显示网页 › uniapp实现购物商城主页面 |
uniapp实现购物商城主页面
|
文章目录
1. 下载 HBuilderX2. 安装 HBuilderX3. 首页3.1 效果图：3.2 实现代码:3.3 页面ui结构:
4. 分类页面4.1 效果图4.2 动态渲染分类列表4.2.1 页面左侧列表ui结构4.2.3 页面右侧列表ui结构
4.3实现代码
5. 购物车页面5.1 效果图5.2 页面ui结构5.3 实现代码
6.我的页面6.1 效果图6.2 页面ui结构6.3 实现代码
1. 下载 HBuilderX
官网链接：https://www.dcloud.io/hbuilderx.html 2. 安装 HBuilderX1.将在官网下载好的压缩包解压到文件夹中 2.解压完成后双击.exe文件就能打开HBuilderX 3. 首页 3.1 效果图：
数据请求：使用异步函数，在请求指定 URL 的数据后，将结果赋值给this.getSwiperList()、this.getNavList()、this.getFloordata() 变量。 export default { data() { return { swiperList: [], navList: [], floordata: [] } }, onLoad() { this.getSwiperList() this.getNavList() this.getFloordata() }, methods: { async getSwiperList() { const res = await this.$Https({ url: '/home/swiperdata' }) // console.log(res); this.swiperList = res.message; }, async getNavList() { const res = await this.$Https({ url: '/home/catitems' }) // console.log(res); this.navList = res.message; }, async getFloordata() { const res = await this.$Https({ url: '/home/floordata' }) // console.log(res); this.floordata = res.message; } } } 3.3 页面ui结构: 4. 分类页面 4.1 效果图
“scroll-view”：垂直滚动的视图。使用v-bind指令来绑定属性值，以实现动态更新属性。在这里，scroll-y属性被设置为true，以启用垂直滚动。"scroll-top"属性来设置视图的初始滚动位置。这个属性可以用来控制视图的滚动位置，以便用户可以直接跳转到他们感兴趣的内容。 {{item}} 4.2.3 页面右侧列表ui结构 /{{item.cat_name}}/ {{item2.cat_name}} 4.3实现代码1.使用生命周期函数“onLoad()”，它在页面加载时会自动执行。 2.使用“uni.getStorageSync()”方法从本地缓存中获取名为“cates”的数据，如果本地缓存中没有该数据，则执行“this.getCategories()”方法从服务器端获取数据。 onLoad() { const Cates = uni.getStorageSync('cates'); if (!Cates) { this.getCategories(); } else { if ((Date.now() - Cates.time) > 1000 * 10) { this.getCategories(); } else { console.log('使用旧数据'); this.categories = Cates.data; this.leftview = this.categories.map(e => e.cat_name) this.rightview = this.categories[0].children } } },3.getCategories方法：这是异步方法，它使用了async和await关键字，以便在等待服务器返回数据时不会阻塞页面的渲染。向服务器发送请求，获取数据，还将数据保存到本地缓存中，以便在用户下次访问时可以直接使用缓存中的数据。如果数据保存失败，则会弹出一个提示框。 4.ChangedIndex方法：处理分类切换的方法。它接收参数index，表示用户选择的分类的索引。该方法将data中的“active”属性设置为index，以标记当前选中的分类。然后，更新data中的“rightview”属性，以显示该分类下的子分类。 methods: { async getCategories() { const res = await this.$Https({ url: '/categories' }) this.categories = res.message try { uni.setStorageSync('cates', { time: Data.now(), data: this.categories }); } catch (e) { uni.showToast({ tital: "数据缓存失败", duration: 2000 }) } this.leftview = this.categories.map(v => v.cat_name) this.rightview = this.categories[0].children // console.log(this.rightview); }, ChangedIndex(index) { this.active = index; this.rightview = this.categories[index].children this.scrollTop = this.scrollTop === 0 ? 1 : 0 } } 5. 购物车页面 5.1 效果图
![span""/span](span"../../static/none.png"/span)
5.3 实现代码
data属性：在组件中定义data属性，包含了默认图片链接和两个用于控制商品数量的属vshowNum和vshowNumOnly。props属性：在组件中定义props属性，用于接收父组件传递过来的数据。其中，goods属性表示商品的详细信息，showCheck属性表示是否显示选择框，showNum属性表示是否显示商品数量，allowLongTop属性表示是否允许长按删除，showNumOnly属性表示是否只显示商品数量而不显示加减按钮。methods方法：在组件中定义了一些方法，用于处理用户的操作。showNumEdit方法用于显示商品数量编辑框，gotoDetail方法用于跳转到商品详情页面，changeChecked方法用于切换商品的选中状态，numSub方法用于减少商品数量，numAdd方法用于增加商品数量，deletegoods方法用于长按删除商品。emit方法：组件中使用了emit方法来触发父组件的事件，以便将商品的选中状态和数量更新到父组件中。
export default {
name: "yjs-goods",
data() {
return {
defaultImg: '../../static/no.gif',
vshowNum: this.showNum,
vshowNumOnly: this.showNumOnly
};
},
props: {
goods: {
type: Object,
default: null
},
showCheck: {
type: Boolean,
default: false
},
showNum: {
type: Boolean,
default: false
},
allowLongTop: {
type: Boolean,
default: false
},
showNumOnly: {
type: Boolean,
default: false
}
},
methods: {
showNumEdit() {
this.vshowNum = true;
this.vshowNumOnly = false;
},
gotoDetail() {
uni.navigateTo({
url: '../../subpkg1/goods-detail/goods-detail?goods_id=' + this.goods.goods_id
})
},
changeChecked() {
this.$emit('changeChecked', {
goods_id: this.goods.goods_id,
checked: !this.goods.checked
})
},
numSub() {
if (this.goods.cartNum > 1) {
this.$emit('changeNum', {
goods_id: this.goods.goods_id,
cartNum: this.goods.cartNum - 1
});
}
},
numAdd() {
this.$emit('changeNum', {
goods_id: this.goods.goods_id,
cartNum: this.goods.cartNum + 1,
})
},
//长按删除
deletegoods() {
if (this.allowLongTop) {
uni.showModal({
title: '删除',
content: '是否删除此商品',
success: (res) => {
if (res.confirm) {
this.$emit('changeNum', {
goods_id: this.goods.goods_id,
cartNum: 0
});
}
}
})
}
}
}
}
6.我的页面
6.1 效果图
|
【本文地址】
公司简介
联系我们