微信小程序商品分类页最佳实践

这篇具有很好参考价值的文章主要介绍了微信小程序商品分类页最佳实践。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

首先我们来分析下UI小妹发来的产品原型图:

微信小程序商品分类页需要实现

1.单击左边的商品类目,右侧实现联动跳转到对应商品类目标题;

2.触屏拖动右侧商品列表,右侧跳转到对应商品类目;

微信小程序商品分类页最佳实践

2.分析需求我们可以把屏幕分为以下部分,主要使用到view scroll-view,代码结构和分解图如下:

<view>
    <!--搜索框-->
    <view></view>

    <!--商品类别.商品列表-->
    <view>
        <!--left-->
        <scroll-view></scroll-view>
        <!--right-->
        <scroll-view></scroll-view>
    </view>
</view>

微信小程序商品分类页最佳实践

 3.搜索view比较简单,在这里就不在阐述,主要实现商品类别和商品列表的交互。

scroll-view使用到的属性

scroll-y:允许纵向滚动(需要设置高度)。

scroll-with-animation:在设置滚动条位置时使用动画过渡。

scroll-top:设置竖向滚动条位置(商品列表上下滑动时动态变更位置)。

scroll-into-view:值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素。

代码实现最后结果如下:

1.test.wxml

//*******************************************************
//*      微信版蚂蚁森林上线了!微信搜蚂蚁森林立即体验!     *
//*******************************************************

<view class="container">
    <view style="height: 100rpx;"></view>

    <view class="VerticalBox">
        <!--left-->
        <scroll-view class="VerticalNav nav" scroll-y scroll-with-animation scroll-top="{{navTop}}" style="height:calc(100vh - 100rpx)">
            <view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{dRes}}" wx:key="this" bindtap='tabSelect' data-id="{{index}}">{{item._name}}</view>
        </scroll-view>
        <!--right-->
        <scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 100rpx)" scroll-into-view="main-{{titleCur}}" bindscroll="VerticalMain">
            <view class="padding-lr" wx:for="{{dRes}}" wx:key="this" id="main-{{index}}">
                <!--标题-->
                <view class='cu-bar'>
                    <view class='action iconfont icon-icon_collect'> {{item._name}</view>
                </view>
                <!--列-->
                <block wx:if="{{item.res.length>0}}">
                    <template is="hotSelling" wx:for="{{item.res}}" wx:key="this" data="{{item}}"></template>
                </block>
                <block wx:else>
                    <view style="height: 300rpx;line-height: 300rpx;text-align: center;color:gray;">本类目无</view>
                </block>
            </view>
        </scroll-view>
    </view>
</view>

2.test.wxss

.VerticalBox {display: flex;width: 100vw;}

.VerticalNav.nav {width: 200rpx;white-space: initial;}

.VerticalNav.nav .cu-item {width: 100%;text-align: center;background-color: #fff;margin: 0;border: none;height: 50px;line-height: 50px;position: relative;}

.VerticalNav.nav .cu-item.cur {background-color: #f1f1f1;}

.text-green {color: #39b54a;font-weight: bold;}

.VerticalNav.nav .cu-item.cur::after {content: ''; width: 18rpx;height: 40rpx;border-radius: 10rpx 0 0 10rpx;position: absolute;background-color: currentColor;top: 0;right: 0rpx;bottom: 0;margin: auto;}

.VerticalMain {background-color: #f1f1f1;}

.padding-top {padding-top: 30rpx;}

.padding-lr {padding-left: 20rpx;padding-right: 20rpx;}

.cu-bar {display: flex;position: relative;align-items: center;min-height: 100rpx;justify-content: space-between;position: relative;background-color: white;color: #666666;margin-bottom: 2rpx;background-image: linear-gradient(rgb(0, 180, 230), rgb(250, 250, 250));}

.cu-bar .action {display: flex;align-items: center;height: 100%;justify-content: center;max-width: 100%;}

3.test.js文章来源地址https://www.toymoban.com/news/detail-498042.html

//*******************************************************
//*      微信版蚂蚁森林上线了!微信搜蚂蚁森林立即体验!     *
//*******************************************************


// 微信版蚂蚁森林:https://developers.weixin.qq.com/community/personal/oCJUswzZJO5lZcMDd3mKoDAClVdo
const app = getApp()
Page({
    data: {
        TabCur: 0, //当前点击Tab
        titleCur: 0,//标题指引
        navTop: 0,
        load: true,
        dRes: [],
    },

    tabSelect(e) {
        let i = Number(e.currentTarget.dataset.id)
        this.setData({
            TabCur: i,
            titleCur: i,
            navTop: (i - 1) * 50
        })

    },
    VerticalMain(e) {
        let self= this;
        let dRes = this.data.dRes;
        let tabHeight = 0;
        if (this.data.load) {
            for (let i = 0; i < dRes.length; i++) {
                let view = wx.createSelectorQuery().select("#main-" + i);
                view.fields({
                    size: true
                }, data => {
                    dRes[i].top = tabHeight;
                    tabHeight = tabHeight + data.height;
                    dRes[i].bottom = tabHeight;
                }).exec()
            }
            self.setData({
                load: false,
                dRes: dRes
            })
        }
        let scrollTop = e.detail.scrollTop + 20;
        for (let i = 0; i < dRes.length; i++) {
            if (scrollTop > dRes[i].top && scrollTop < dRes[i].bottom) {
                that.setData({
                    navTop: (i - 1) * 50,
                    TabCur: i
                })
                return false
            }
        }
    }
})

到了这里,关于微信小程序商品分类页最佳实践的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序-关于我们页面模板

    JS WXML WXSS

    2024年02月16日
    浏览(54)
  • 微信小程序商品详情页(页面的实现)

    通过搜索页面传入的id,来进行操作(没有接口,都是假数据),页面如下 首先先把页面搭建起来,并进行渲染顶部导航栏已经做过现在就不发了,直接复制就好 页面信息的wxml 尾部导航栏wxml  js wxss 现在简单的小页面完成了

    2024年02月04日
    浏览(55)
  • 微信小程序实现商品加入购物车案例

    思考: 购物车中的数据保存在哪里?用哪种数据结构进行保存? 小程序中可能有多个页面需要对购物车中的数据进行操作,因此我们想到把数据存到全局中。可以使用 wx.setStorageSync() 储存,用 wx.getStorageSync() 进行获取,以数组格式方便对数据进行操作。 一、商品加入购物车

    2024年02月10日
    浏览(49)
  • 微信小程序碰到情人节-我们结婚吧---【小程序花园】

    微信目录集链接在此: 详细解析黑马微信小程序视频–【思维导图知识范围】 难度★✰✰✰✰ 微信小程序开发实战(第2版)入门–【开发实战(第2版)】 ★★✰✰✰ 不会导入/打开小程序的看这里:参考 微信小程序开发实战(第2版)入门–【开发实战(第2版)】 用免费

    2024年02月11日
    浏览(55)
  • 微信小程序商城项目实战(第四篇:商品详情页)

    json里边设置一下页面标题 \\\"navigationBarTitleText\\\": \\\"商品详情\\\" 上方由一个轮播图展示, 中间为商品信息,后台会返回图文详情富文本,前台只需赋值 下方固定一个工具栏 客服 分享 购物车 添加购物车 立即购买 分享是将一个按钮隐藏且将其定位在分享处,客服也是一样的 加入购

    2024年02月09日
    浏览(64)
  • 基于微信小程序的商品展示系统+ssm

    随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序被用户普遍使用,为方便用户能够可以随时进行小程序的相应信息内容的管理,特开发了基于微信

    2024年01月18日
    浏览(45)
  • 微信小程序毕业设计作品成品(43)微信小程序水商品商城订水送水系统设计与实现

    博主介绍: 《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版

    2024年02月08日
    浏览(36)
  • 微信小程序商城开发-商品详情页跳转购物车

    微信小程序商城开发中商品详情页中购物车页面的跳转(仅限于tabbar页面的跳转)   点击商品详情页中的购物车图标跳转不到tabbar及导航栏中的购物车页面,总是报错 微信小程序开发需要跳转tabbar页面的话,有固定的跳转方式,不是开发中所有的跳转方式都适用于tabbar跳转

    2024年02月17日
    浏览(57)
  • 【计算机论文指导】基于微信小程序的商品展示系统小程序

    商品展示系统 摘 要 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序被用户普遍使用,为方便用户能够可以随时进行小程序的相应信息内容的管理

    2024年02月03日
    浏览(68)
  • 黑马微信小程序-实现本地服务九宫格并展示商品列表

    1.1准备接口 黑马接口:https://applet-base-api-t.itheima.net/categories 说明:这是获取九宫格的数据接口 1.2使用接口  说明:声明变量获取数据。  res.data数据 编写简单css 实图展示      声明query变量  并设置导航标题 标题展示      2.1准备接口 商品列表接口:https://applet-base-api-t

    2024年02月11日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包