新增10+页面模板

新增form表单部分组件的演示代码

新增图标

添加第三方开发插件演示(所属权归属第三方)

新增tn-scroll-view下拉组件开发(会员)

新增tn-stack-swiper堆叠轮播添加垂直滚动属性(会员)

新增tn-waterfall瀑布流组件(会员)

新增tn-tree-view树形菜单组件(会员)

新增tn-cascade-selection级联选择组件(会员)

新增tn-custom-swiper组件(会员【实验室】)

新增tn-lazy-load懒加载组件

新增tn-load-more加载更多组件

新增tn-sekeleton骨架屏组件

新增tn-empty空白页组件

新增tn-landscape压屏窗组件

新增tn-verification-code-input验证码输入组件

新增tn-goods-nav商品导航组件

修复tn-slider在tn-form-item下在H5端无法滑动的bug

修复tn-swipe-action-item点击回调事件中无法读取name属性的bug

修复群友已反馈的bug

优化部分页面在iphone上底部确实的问题
This commit is contained in:
JaylenTech
2022-03-16 09:13:58 +08:00
parent 4883c3ff4c
commit 81579ccee5
56 changed files with 6297 additions and 487 deletions

View File

@@ -1,5 +1,5 @@
<template>
<view class="template-wallpaper" style="background-color: #343434;">
<view class="template-wallpaper tn-safe-area-inset-bottom" style="background-color: #343434;">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@@ -106,7 +106,7 @@
<!-- 比例 end-->
<!-- 图文 -->
<view class="tn-flex tn-flex-direction-column tn-padding-bottom">
<view class="tn-flex tn-flex-direction-column">
<block v-for="(item,index) in content" :key="index">
<view class="tn-blogger-content__wrap">
@@ -148,6 +148,35 @@
</view>
<!-- 底部tabbar start-->
<view class="tabbar footerfixed">
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-home-smile">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/wallpaper-home.png'></image>
</view>
<view class="tn-color-white">首页</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-watercup tn-color-gray">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/wallpaper-more.png'></image>
</view>
<view class="tn-color-gray">投稿</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-ticket tn-color-gray">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/wallpaper-my.png'></image>
</view>
<view class="tn-color-gray">我的</view>
</view>
</view>
<view class="tn-padding-xl"></view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
@@ -358,6 +387,8 @@
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-wallpaper{
}
/* 自定义导航栏内容 start */
.custom-nav {
height: 100%;
@@ -530,5 +561,54 @@
border-radius: 10rpx;
}
/* 文章内容 end*/
/* 底部tabbar start*/
.footerfixed{
position: fixed;
width: 100%;
bottom: 0;
z-index: 999;
background-color: #080808;
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
}
.tabbar {
display: flex;
align-items: center;
min-height: 110rpx;
justify-content: space-between;
padding: 0;
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}
.tabbar .action {
font-size: 22rpx;
position: relative;
flex: 1;
text-align: center;
padding: 0;
display: block;
height: auto;
line-height: 1;
margin: 0;
overflow: initial;
}
.tabbar .action .bar-icon {
width: 100rpx;
position: relative;
display: block;
height: auto;
margin: 0 auto 10rpx;
text-align: center;
font-size: 42rpx;
}
.tabbar .action .bar-icon image {
width: 50rpx;
height: 50rpx;
display: inline-block;
}
</style>