商城详情页的开发

详情页

1.写好详情页的结构与CSS
2.根据在首页列表点击的商品id传送至详情页,详情页再根据id发送起请求，再把数据渲染。
布局要点:
1.头部的header需要写适配。
2.将内容分为detail_0,detail_1依次为评论、详情、推荐。
索引与类名保持一致,方便以后来处理，此处需要使用id来获取，而不是class[在小程序中,scroll-view的时间也要求id命名]
3.给scroll-view设置高度,需要获取到屏幕的高度,在app.json里用this.getSystemInfo(),思路同适配。
4.给详情页头部加Tabs栏,对应detail_0,做出点击激活效果(借助activeIndex),data中定义Tabs数据,for遍历渲染。
5.根据id调用接口,把首页列表对应的id传给详情页:

//首页列表中的list_item添加点击事件跳转至详情页

bindtap="toDetailPage" data-id="{{item.goods_id}

    // 跳转到detail页面
    toDetailPage(e) {
        // 获取到对应商品的id
        // console.log(e.currentTarget.dataset.id);
        let id = e.currentTarget.dataset.id;
        wx.navigateTo({
            url: '../detail/detail?goods_id=' + id,
        })
    },
1
2
3
4
5
6
7
8
9
10
11

在详情页接收传来的id

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        // 获取到路由传递过来的id
        // console.log(options.goods_id);
        this.getDetailDatas(options);//根据id发起异步请求
    },

    // 获取详情页
    async getDetailDatas(options) {
        let result = await getDetailApi({
            url: "/goods/show",
            data: {
                goods_id: options.goods_id
            },
            method: "post"
        });
        // console.log(result.data.data);
        this.setData({
            detailDatas: result.data.data
        })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

//将数据渲染至页面

点击详情页的Tab栏,跳转至对应的楼层

思路:
1.利用scroll-view的scroll-into-view//根据id选择器,跳转到对应的子元素.
scroll-with-animation=“{{true}}”//加动画
2.data中定义goid:" "
3.在顶部Tabs的点击事件里:changeTabs中
//获取当前点击的索引index
//点击获取对应的id选择器
let id=“detail”+index
//修改goid为id
4.在scroll-view中加上scroll-into-view=“{{goid}}”

    <view class="tabs">
      <view class="tabs_item {{activeIndex==index?'active':''}}" wx:for="{{tabs}}" data-index="{{index}}" wx:key="index" bindtap="changeTabs">{{item}}view>
    view>
1
2
3

    changeTabs(e) {
        let index = e.currentTarget.dataset.index;
        // 点击后获得对应的id选择器
        let id = "detail_" + index
        this.setData({
            activeIndex: index,
            goid: id
        })
        // console.log(this.data.goid);
    },



1
2
3
4
5
6
7
8
9
10
11
12
13

详情页滚动页面让对应的Tab栏选中

思路：
1.获取到每个楼层的DOM(detail_*)
2.获取到每个楼层的高度与距离顶部的Top值,分别存放在heightArr[]与topArr[]
通过for遍历,判断scrollTop与top和height的关系修改Tabs栏的activeIndex即可

    // 初始化获取DOM操作--需要在onload()中调用
    initDom() {
        let topArr = []; //存放距离顶部的位置
        let heightArr = []; //存放DOM元素的高度
        for (let i = 0; i < 4; i++) {
            //获取DOM
            let detailId = "#detail_" + i;
            const query = wx.createSelectorQuery();
            query.select(detailId).boundingClientRect();
            query.exec((res) => {
                //res有该DOM的Top
                // console.log(res[0]);
                topArr.push(res[0].top);
                heightArr.push(res[0].height);
                this.setData({
                    topArr: topArr,
                    heightArr: heightArr
                })
            })
        }
    }


    // 页面滚动的方法
    scrollPageFn(e) {
        // 获取到scrollTop
        // console.log(e.detail);
        // console.log(this.data.topArr);
        // console.log(this.data.heightArr);
        let scrollTop = e.detail.scrollTop;
        for (let i = 0; i < this.data.topArr.length; i++) {
            // 判断区间
            if (scrollTop < this.data.topArr[i] + this.data.heightArr[i] - this.data.navH / 2) {
                this.setData({
                    activeIndex: i
                })
                break;
            }
        }

    },
//注意：需要减去导航栏的高度,因为页面为px,小程序为rpx,需除以2
//给scroll-view绑定:bindscroll="scrollPageFn"滚动时触发
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43