Vue实战—如何实现商家页面(15)

这篇我们来实现商家页面

搭建文件结构

现在我们需要来搭建项目的html模板:


我们通过vue的特殊特性ref引用了DOM元素seller类。以便我们用BScroll。

address-wrapper类用来存放商家地址,与电话图标。

pics-list类用来配置商家的照片。

safety-wrapper类来配置食品安全档案。

delivery-wrapper类配置配送服务。

shipping-wrapper类配置配送时间。

server-wrapper类配置商家服务,开发票项。

discounts-item类配置用户减免金额活动。

接入数据

内容结构完成后我们为其接入数据。




我们通过data初始化了seller。

使用created钩子通过$axios发起get请求。

在$nextTick中,通过BScroll实现图片的横向滚动以及sellerView的滚动。

组件样式




到这里商家页面的功能我们就实现了。下篇我们说下项目的优化。

你可能感兴趣的:(前端框架,vue.js)