uniapp 电商app签到功能实现 ╰半橙微兮° 2021-07-26 00:36 1132阅读 0赞 ## 签到功能 ## 目前公司所做的电商app要做一个签到送津贴的页面。接口还在开发中,页面已经搭完了。 页面展示如下: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center] 在页面搭建的过程中,遇到几个小问题,下面做一下记录并汇总一下解决方法。 ### uniapp 标题栏透明 ### ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1] 要想实现这种透明的标题栏,就得自定义标题栏了。 首先: pages.json文件中: { "path": "pages/user/sign", "style": { "navigationBarTitleText": "签到有礼", "navigationStyle":"custom" } }, `navigationStyle`参数设置为`custom`即可以将标题栏设置为自定义的情况。 如果自己写一个标题栏,为了保证各种手机型号的兼容性,我还是倾向于用现有的组件。 自定义的标题栏组件如下: 这个自定义的标题栏是功能比较全的了,但是没有实现中间是搜索框的那种情况。后续会讲到这种情况的处理方案。 <template> <view class="uni-navbar"> <view :class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }" :style="{ 'background-color': backgroundColor }" class="uni-navbar__content"> <uni-status-bar v-if="statusBar" /> <view :style="{ color: color,backgroundColor: backgroundColor }" class="uni-navbar__header uni-navbar__content_view"> <view @tap="onClickLeft" class="uni-navbar__header-btns uni-navbar__header-btns-left uni-navbar__content_view"> <view class="uni-navbar__content_view" v-if="leftIcon.length"> <uni-icons :color="color" :type="leftIcon" size="24" /> </view> <view :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length }" class="uni-navbar-btn-text uni-navbar__content_view" v-if="leftText.length"> <text :style="{ color: color, fontSize: '14px' }">{ { leftText }}</text> </view> <slot name="left" /> </view> <view class="uni-navbar__header-container uni-navbar__content_view"> <view class="uni-navbar__header-container-inner uni-navbar__content_view" v-if="title.length"> <text class="uni-nav-bar-text" :style="{color: color }">{ { title }}</text> </view> <!-- 标题插槽 --> <slot /> </view> <view :class="title.length ? 'uni-navbar__header-btns-right' : ''" @click="onClickRight" class="uni-navbar__header-btns uni-navbar__content_view"> <view class="uni-navbar__content_view" v-if="rightIcon.length"> <uni-icons :color="color" :type="rightIcon" size="24" /> </view> <!-- 优先显示图标 --> <view class="uni-navbar-btn-text uni-navbar__content_view" v-if="rightText.length && !rightIcon.length"> <text class="uni-nav-bar-right-text">{ { rightText }}</text> </view> <slot name="right" /> </view> </view> </view> <view class="uni-navbar__placeholder" v-if="fixed"> <uni-status-bar v-if="statusBar" /> <view class="uni-navbar__placeholder-view" /> </view> </view> </template> <script> import uniStatusBar from "@/components/uni-status-bar/uni-status-bar.vue"; import uniIcons from "@/components/uni-icons/uni-icons.vue"; /** * NavBar 自定义导航栏 * @description 导航栏组件,主要用于头部导航 * @tutorial https://ext.dcloud.net.cn/plugin?id=52 * @property {String} title 标题文字 * @property {String} leftText 左侧按钮文本 * @property {String} rightText 右侧按钮文本 * @property {String} leftIcon 左侧按钮图标(图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性) * @property {String} rightIcon 右侧按钮图标(图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性) * @property {String} color 图标和文字颜色 * @property {String} backgroundColor 导航栏背景颜色 * @property {Boolean} fixed = [true|false] 是否固定顶部 * @property {Boolean} statusBar = [true|false] 是否包含状态栏 * @property {Boolean} shadow = [true|false] 导航栏下是否有阴影 * @event {Function} clickLeft 左侧按钮点击时触发 * @event {Function} clickRight 右侧按钮点击时触发 */ export default { name: "UniNavBar", components: { uniStatusBar, uniIcons }, props: { title: { type: String, default: "" }, leftText: { type: String, default: "" }, rightText: { type: String, default: "" }, leftIcon: { type: String, default: "" }, rightIcon: { type: String, default: "" }, fixed: { type: [Boolean, String], default: false }, color: { type: String, default: "#000000" }, backgroundColor: { type: String, default: "#FFFFFF" }, statusBar: { type: [Boolean, String], default: false }, shadow: { type: [Boolean, String], default: false }, border: { type: [Boolean, String], default: true } }, mounted() { if (uni.report && this.title !== '') { uni.report('title', this.title) } }, methods: { onClickLeft() { this.$emit("clickLeft"); }, onClickRight() { console.log("规则页面"); } } }; </script> <style scoped> .uni-nav-bar-text { /* #ifdef APP-PLUS */ font-size: 34rpx; /* #endif */ /* #ifndef APP-PLUS */ font-size: 32rpx; /* #endif */ } .uni-nav-bar-right-text { font-size: 28rpx; } .uni-navbar__content { position: relative; background-color: #ffffff; overflow: hidden; } .uni-navbar__content_view { /* #ifndef APP-NVUE */ display: flex; /* #endif */ align-items: center; flex-direction: row; /* background-color: #FFFFFF; */ } .uni-navbar__header { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: row; height: 44px; line-height: 44px; font-size: 16px; /* background-color: #ffffff; */ } .uni-navbar__header-btns { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-wrap: nowrap; width: 120rpx; padding: 0 6px; justify-content: center; align-items: center; } .uni-navbar__header-btns-left { /* #ifndef APP-NVUE */ display: flex; /* #endif */ width: 150rpx; justify-content: flex-start; } .uni-navbar__header-btns-right { /* #ifndef APP-NVUE */ display: flex; /* #endif */ width: 150rpx; padding-right: 30rpx; justify-content: flex-end; } .uni-navbar__header-container { flex: 1; } .uni-navbar__header-container-inner { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex: 1; align-items: center; justify-content: center; font-size: 28rpx; } .uni-navbar__placeholder-view { height: 44px; } .uni-navbar--fixed { position: fixed; z-index: 998; } .uni-navbar--shadow { /* #ifndef APP-NVUE */ box-shadow: 0 1px 6px #ccc; /* #endif */ } .uni-navbar--border { /* border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: #e5e5e5; */ } </style> 上面的这个组件比较麻烦,可以通过下面的组件进行封装一下,完全可以满足普通的标题栏的方案: 普通的标题栏都是可以满足的,左右侧按钮,背景颜色,字体颜色等都是可以设置的。 封装如下: <template> <uni-nav-bar :title="title" leftIcon="arrowleft" :statusBar="true" @clickLeft="clickLeft" :fixed="true" :shadow="shadow" :backgroundColor="backgroundColor" :rightText="rightText" :color="color"/> </template> <script> import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue' export default { components:{ uniNavBar}, props:{ title:{ type:String, default:"标题" }, shadow:{ type:Boolean, default:false }, backgroundColor:{ type:String, default:null }, color:{ type:String, default:"#000" }, rightText:{ type:String, default:"" } }, methods:{ clickLeft(){ uni.navigateBack({ delta:1 }) } } } </script> 为了实现透明的标题栏,只需要将上面封装好的组件中的背景颜色改为透明色即可。 ### 签到部分七天的渲染 ### ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2] 渲染签到部分的时候,出现了一个图片展示不出来的问题。浏览器端是可以i展示的,但是app端不展示。 最终改为下面的这种展示形式:`<image :src="item.status==0?'/static/sign/money.png':(item.status==1?'/static/sign/bu.png':(item.status==2?'/static/sign/redBag.png':(item.status==3?'/static/sign/gift.png':'/static/sign/giftOpen.png')))" mode="heightFix"></image>` 就可以了。 图片展示不出来,是因为`image`标签不支持本地图片与动态图片的同时展示,如果根据动态数据来展示不同的本地图片,则可以通过下面的这种方式来处理。就是通过三目运算的这种方式。 <view class="signDay"> <view class="dayTit" v-for="(item,index) in dayList" :key="item.num"> <image :src="item.status==0?'/static/sign/money.png':(item.status==1?'/static/sign/bu.png':(item.status==2?'/static/sign/redBag.png':(item.status==3?'/static/sign/gift.png':'/static/sign/giftOpen.png')))" mode="heightFix"></image> <text>第<text>{ { item.num | dayFilter}}</text>天</text> </view> </view> ### page背景颜色设置失败 ### ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 3] 由于页面下面部分是分页加载的商品列表,在下拉触底的时候,会自动加载下一页的数据。因此背景颜色我需要设置一下。 给page添加背景颜色的时候,发现设置了不管用。 百度一番后,发现需要去掉`style`标签上的`scoped`,page就可以设置成功了。 <style lang="scss"> page{ width:100vw; height:100vh; width:100%; height:100%; background:#FDE788; } </style> ### 签到弹窗的处理 ### ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 4] 这个就是一个普通的animation.css动画。 这个后续再涉及。 接口处理的过程中,如果有遇到什么问题,我会及时补充。 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/7b3a94b316e843d5824afefa947c2bb7.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/156ee419e02c4b65b88e1d7d30238eab.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210725/e505fe45a39047fda96bb19f563dd9d3.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210725/355f3f96882f44d0846f59d9746da80e.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20210725/0758397558484a37b8a6e9574b5c8e65.png
还没有评论,来说两句吧...