132 lines
3.9 KiB
Vue
132 lines
3.9 KiB
Vue
<template>
|
||
<view class="page">
|
||
<nav-bar :back="false">案例展示</nav-bar>
|
||
<view class="table_box">
|
||
<view class="table_title">使用文档</view>
|
||
<view class="table_content">
|
||
<text @click="onJumpWebview('https://ext.dcloud.net.cn/plugin?id=813')">文档地址：https://ext.dcloud.net.cn/plugin?id=813</text>
|
||
</view>
|
||
</view>
|
||
<view class="nav_list" @click="onPageJump('/pages/demo/navBarMemo/demo')">
|
||
<image src="../../../static/demo/icon_case.png" mode="aspectFit"></image>
|
||
<text>默认固定导航 (nvue版)</text>
|
||
</view>
|
||
<view class="nav_list" @click="onPageJump('/pages/demo/navBarMemo/demo1')">
|
||
<image src="../../../static/demo/icon_case.png" mode="aspectFit"></image>
|
||
<text>不固定导航</text>
|
||
</view>
|
||
<view class="nav_list" @click="onPageJump('/pages/demo/navBarMemo/demo2')">
|
||
<image src="../../../static/demo/icon_case.png" mode="aspectFit"></image>
|
||
<text>透明导航</text>
|
||
</view>
|
||
<view class="nav_list" @click="onPageJump('/pages/demo/navBarMemo/demo3')">
|
||
<image src="../../../static/demo/icon_case.png" mode="aspectFit"></image>
|
||
<text>透明固定导航 (nvue版)</text>
|
||
</view>
|
||
<view class="nav_list" @click="onPageJump('/pages/demo/navBarMemo/demo10')">
|
||
<image src="../../../static/demo/icon_case.png" mode="aspectFit"></image>
|
||
<text>颜色渐变固定导航</text>
|
||
</view>
|
||
<view class="nav_list" @click="onPageJump('/pages/demo/navBarMemo/demo11')">
|
||
<image src="../../../static/demo/icon_case.png" mode="aspectFit"></image>
|
||
<text>复杂的颜色渐变导航</text>
|
||
</view>
|
||
<view class="nav_list" @click="onPageJump('/pages/demo/navBarMemo/demo4')">
|
||
<image src="../../../static/demo/icon_case.png" mode="aspectFit"></image>
|
||
<text>显示首页按钮、标题居左、字体颜色、背景颜色</text>
|
||
</view>
|
||
<view class="nav_list" @click="onShare('/pages/demo/navBarMemo/demo5')">
|
||
<image src="../../../static/demo/icon_case.png" mode="aspectFit"></image>
|
||
<text>分享出去的页面效果</text>
|
||
</view>
|
||
<view class="nav_list" @click="onPageJump('/pages/demo/navBarMemo/demo6')">
|
||
<image src="../../../static/demo/icon_case.png" mode="aspectFit"></image>
|
||
<text>左插槽-地址选择</text>
|
||
</view>
|
||
<view class="nav_list" @click="onPageJump('/pages/demo/navBarMemo/demo7')">
|
||
<image src="../../../static/demo/icon_case.png" mode="aspectFit"></image>
|
||
<text>中插槽-搜索框</text>
|
||
</view>
|
||
<view class="nav_list" @click="onPageJump('/pages/demo/navBarMemo/demo8')">
|
||
<image src="../../../static/demo/icon_case.png" mode="aspectFit"></image>
|
||
<text>右插槽-搜索图标</text>
|
||
</view>
|
||
<view class="nav_list" @click="onPageJump('/pages/demo/navBarMemo/demo9')">
|
||
<image src="../../../static/demo/icon_case.png" mode="aspectFit"></image>
|
||
<text>动态改变标题、字体颜色、背景颜色</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {};
|
||
},
|
||
onLoad() {},
|
||
methods: {
|
||
onPageJump(url){
|
||
uni.navigateTo({
|
||
url:url
|
||
});
|
||
},
|
||
onShare(url){
|
||
uni.reLaunch({
|
||
url:url
|
||
});
|
||
},
|
||
onSwitchTab(url){
|
||
uni.switchTab({
|
||
url:url
|
||
});
|
||
},
|
||
onJumpWebview(url){
|
||
// #ifdef H5
|
||
window.open(url);
|
||
// #endif
|
||
// #ifndef H5
|
||
this.$store.commit("setWebViewUrl", url);
|
||
uni.navigateTo({
|
||
url: '/pages/template/webView'
|
||
});
|
||
// #endif
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.nav_list {
|
||
background-color: #fff;
|
||
padding: 30upx;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
margin-bottom: 10upx;
|
||
&:active {
|
||
background-color: #F5f5f5;
|
||
}
|
||
image {
|
||
width: 40upx;
|
||
height: 40upx;
|
||
}
|
||
text {
|
||
font-size: 28upx;
|
||
color: #333;
|
||
margin-left: 30upx;
|
||
}
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: 30upx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 40upx;
|
||
height: 40upx;
|
||
background-image: url('../../../static/demo/icon_right.png');
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
}
|
||
}
|
||
</style>
|