1. 首页
  2. 文章中心
  3. uni-app

UNIAPP实战项目笔记25 商品详情页滚动透明渐变导航栏内容块布局固定底部布局

59 阅读 0 评论
我是靠谱客的博主 超级小鸭子，最近开发中收集的这篇文章主要介绍UNIAPP实战项目笔记25 商品详情页滚动透明渐变导航栏内容块布局固定底部布局，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

商品详情页滚动透明渐变导航栏

商品详情页内容块布局

商品详情页固定底部布局

商品详情页布局

头部,内容部分,底部
details.vue

<template>
    <view class="details">
        <!-- 商品图 -->
        <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
            <swiper-item
                v-for="(item,index) in swiperList"
                :key="index"
            >
                <view class="swiper-item">
                    <image class="swiper-img" :src="item.imgUrl" mode=""></image>
                </view>
            </swiper-item>
        </swiper>
        <!-- 价格和名称 -->
        <view class="details-goods">
            <view class="goods-pprice">¥399.00 </view>
            <view class="goods-oprice">¥599.00 </view>
            <view class="goods-name">大衣绒毛大款貂皮球毛 </view>
        </view>
        <!-- 商品详情图 -->
        <view class="">
            <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
            <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
            <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
            <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
            <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
            <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
        </view>
        
        <!-- 商品列表 -->
        <Card cardTitle="看了又看"></Card>
        <CommodityList :dataList="dataList"></CommodityList>
        
        <!-- 底部 -->
        <view class="details-foot">
            <view class="iconfont icon-xiaoxi"></view>
            <view class="iconfont icon-31gouwuche"></view>
            <view class="add-shopcart">加入购物车</view>
            <view class="purchase">立刻购买</view>
        </view>
    </view>
</template>

<script>
    import Card from '@/components/common/Card.vue';
    import CommodityList from '@/components/common/CommodityList.vue';
    export default {
        data() {
            return {
                swiperList:[
                    {imgUrl:"../../static/img/b3.jpg"},
                    {imgUrl:"../../static/img/b3.jpg"},
                    {imgUrl:"../../static/img/b3.jpg"}
                ],
                dataList:[{
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:2,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },{
                      id:3,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  }]
            };
        },
        components:{
            Card,
            CommodityList
        }
    }
</script>

<style lang="scss">
swiper{
    width: 100%;
    height: 700rpx;
}
.swiper-img{
    width: 100%;
    height: 700rpx;
}
.details{
    padding-bottom: 90rpx;
}
.details-goods{
    text-align: center;
    font-weight: bold;
    font-size: 36rpx;
    padding: 10rpx 0;
}
.details-img{
    width: 100%;
}
.details-foot{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
}
.details-foot .iconfont{
    width: 60rpx;
    height: 60rpx;
    border-radius: 100%;
    background-color: #000000;
    color: #FFFFFF;
    text-align: center;
    margin: 0 10rpx;
    line-height: 60rpx;
}
.add-shopcart{
    margin: 0 40rpx;
    padding: 6rpx 30rpx;
    background-color: #000000;
    color: #FFFFFF;
    border-radius: 40rpx;
    
}
.purchase{
    margin: 0 40rpx;
    padding: 6rpx 30rpx;
    background-color: #49BDFB;
    color: #FFFFFF;
    border-radius: 40rpx;
}
</style>

Commodity组件优化

增加点击商品图片跳转到详情
代码如下 Commodity

<template>
    <view class="commodity" 
        :style="'flex-wrap:'+wrap+';'"
    >
        <!-- 单个商品组件 -->
        <view class="commodity-item"
            v-for="(item,index) in dataList"
            :key="index"
            :style="'width:'+itemW+';'"
            @tap="goDetails"
        >
            <image 
                class="commodity-img" 
                :src="item.imgUrl"                 
                :style="'height:'+bigH+';'"
                mode=""
            ></image>
            <view class="commodity-content">
                <text class="commodity-name" :style="'font-size:'+nameSize+';'">{{item.name}}</text>
                <view class="">
                    <text class="pprice">${{item.pprice}}</text>
                    <text class="oprice">${{item.oprice}}</text>
                </view>
                <text class="discount">{{item.discount}}折</text>
            </view>
        </view>
    </view>
</template>

<script>
    /* 接受数据  dataList*/
    export default {
        props:{
            //数据
            dataList:Array,
            // 宽度
            itemW:{
                type:String,
                default:"375rpx" /* 通过传参数来改变组件默认样式*/
            },
            //高度
            bigH:{
                type:String,
                default:"375rpx" /* 通过传参数来改变组件默认样式*/
            },
            // 是否换行
            wrap:{
                type:String,
                default:"wrap" /* 通过传参数来改变组件默认样式*/
            },
            //商品文字大小
            nameSize:{
                type:String,
                default:"26rpx"
            }
        },
        methods:{
            goDetails(){
                uni.navigateTo({
                    url:'/pages/details/details'
                })
            }
        }
    }
</script>

<style lang="scss">
.commodity{
    display: flex;
}
.commodity-item{
    padding-bottom: 20rpx;
}
.commodity-img{
    width: 100%;
}
.commodity-content{
    text-align: center;
}
.commodity-name{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
    color: #333;
    word-break: break-all;
    padding: 6rpx 20rpx;
}
.oprice{
    text-decoration: line-through;
    font-size: 24rpx;
    color: #999;
}
.discount{
    border-radius: 4rpx;
    border: 1px solid #FF3333;
    padding: 2rpx 10rpx;
    font-size: 20rpx;
    color: #FF3333;
}

</style>

设置page.json实现透明渐变导航栏

代码如下 page.json部分代码

{
            "path" : "pages/details/details",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "商品详情",
                "app-plus": {
                    "scrollIndicator": "none",
                    "titleNView": {
                        "type": "transparent",
                        "buttons": [
                            {
                                "type": "menu"
                            },
                            {
                                "type": "share"
                            }
                        ]
                    }
                }
            }
        }

实例图片

透明渐变导航栏1
透明渐变导航栏2

前端目录结构

  • manifest.json 配置文件： appid、logo…

  • pages.json 配置文件： 导航、 tabbar、 路由

  • main.js vue初始化入口文件

  • App.vue 全局配置：样式、全局监视

  • static 静态资源：图片、字体图标

  • page 页面

    • index
      • index.vue
    • list
      • list.vue
    • my
      • my.vue
    • search
      • search.vue
    • search-list
      • search-list.vue
    • shopcart
      • shopcart.vue
    • details
      • details.vue

  • components 组件

    • index
      • Banner.vue
      • Hot.vue
      • Icons.vue
      • indexSwiper.vue
      • Recommend.vue
      • Shop.vue
    • common
      • Card.vue
      • Commondity.vue
      • CommondityList.vue
      • Line.vue
      • ShopList.vue

  • common 公共文件：全局css文件 || 全局js文件

    • api
      • request.js
    • common.css
    • uni.css

最后

以上就是超级小鸭子为你收集整理的UNIAPP实战项目笔记25 商品详情页滚动透明渐变导航栏内容块布局固定底部布局的全部内容，希望文章能够帮你解决UNIAPP实战项目笔记25 商品详情页滚动透明渐变导航栏内容块布局固定底部布局所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(39)

相关文章

几个简单的技巧让你写出的vue.js代码更优雅
几个简单的技巧让你写出的vue.js代码更优雅
Uniapp商城项目实战技巧
Uniapp商城项目实战技巧
uniapp 商城实例
uniapp 商城实例
UNIAPP实战项目笔记27 商品详情对应数据渲染 EXPRESS 设置跨域访问
UNIAPP实战项目笔记27 商品详情对应数据渲染 EXPRESS 设置跨域访问
UNIAPP实战项目笔记25 商品详情页滚动透明渐变导航栏内容块布局固定底部布局
UNIAPP实战项目笔记25 商品详情页滚动透明渐变导航栏内容块布局固定底部布局
UNIAPP实战项目笔记28 商品分享功能点分享按钮分享到微信好友
UNIAPP实战项目笔记28 商品分享功能点分享按钮分享到微信好友
css全局默认样式
css全局默认样式
css全局样式总结
css全局样式总结

评论列表共有 0 条评论

立即
投稿
返回
顶部