<view class="rui-head-content" style="background: url({{bannerBgIcon}}) no-repeat center top/100% auto;min-height:{{sysInfo.CustomBar}}px;padding-top:{{sysInfo.StatusBar}}px;">
<view class="rui-flex-ac" style="height:{{sysInfo.CustomBar - sysInfo.StatusBar}}px;margin:0 calc(750rpx - {{sysInfo.Custom.right}}px);">
<view class="rui-fg rui-mr20 rui-flex-ac">
<slot name="title" wx:if="{{!title}}"></slot>
<image wx:if="{{title}}" src="{{returnIcon}}" style="width: 8px;height: 16px;" class="rui-return-icon rui-fa rui-mr20" bindtap="routeTo" data-delta="1"></image>
<text wx:if="{{title}}" class="rui-line1 rui-color0">{{title}}</text>
</view>
<view class="rui-fa" style="height:{{sysInfo.Custom.height}}px;width:{{sysInfo.Custom.width}}px;"></view>
</view>
<view style="margin:0 calc(750rpx - {{sysInfo.Custom.right}}px);">
<slot name="other"></slot>
</view>
</view>
注意:flex 布局等使用的公用样式,返回的方法 routeTo 进行统一的封装!
const app = getApp()
Component({
useNetIcons: ['bannerBgIcon', 'returnIcon'],
options: {
addGlobalClass: true,
multipleSlots: true
},
properties: {
title: String
},
data: {
sysInfo: app.globalData
},
methods: {
}
})
@import '../../css/common.wxss';
.rui-head-content{
box-sizing: border-box;
color: #FBECC4;
font-size: 14px;
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
z-index: 1024;
}
{
"component": true,
"usingComponents": {
"rui-customs": "../../components/rui-customs/rui-customs"
}
}
<rui-custom title="智家专区"/>
效果:
<rui-customs>
<view class="rui-fg rui-mr20 rui-flex-ac" slot="title">
<image src="{{newlogoIcon}}" class="rui-fa rui-icon44 rui-mr20"></image>
<text class="rui-color0 rui-mr10 rui-fa" style="font-size: 15px;">天虎严选</text>
<text class="rui-fg"> | 优享合约 精选生活</text>
</view>
<view class="rui-search-content rui-flex-ac" slot="other">
<view class="rui-fg rui-flex-ac rui-input-content">
<image src="{{scansearchIcon}}" class="rui-icon30 rui-fa rui-mr20"></image>
<view class="rui-fg"><input type="text" placeholder="请输入内容查找" class="rui-input rui-fs24"/></view>
<image src="{{searchiconIcon}}" class="rui-icon30 rui-fa rui-ml20"></image>
</view>
</view>
</rui-customs>
效果:
4.1 获取元素的属性 dataset 中的 type, url, appid, delta; 4.2 执行 $route 方法,此方法是 js 调用方法;
5.1 对传入参数 type, url, appid, delta 解构赋值; 5.2 判断 appid 是否有效,如果 appid 存在,执行 wx.navigateToMiniProgram(),小程序之间的跳转,注意:需要判断 env_config 是否是正式环境; 5.3 判断 url 的值是否有效,如果有效,判断 url 中是否存在 http,进行web-view打开对应的H5页面,注意:1. webView 页面是公用的打开 H5 的页面,需提前创建;2. H5 url可以存入缓存,也可以使用全局状态变量,此处采用缓存变量【urlAndParams】; 5.4 如果 url 有效,并且不是 H5 页面,直接使用跳转方法 route; 5.5 如果 url 无效,判断 delta 返回参数是否有效,有效执行返回 wx.navigateBack(),无效提示 【功能开发中,敬请关注!】!
import { _toast } from "../helper/utils"
import {env_config} from '../request/env'
const types = {
navigateTo: 'navigateTo',
switchTab: 'switchTab',
reLaunch: 'reLaunch',
redirectTo: 'redirectTo',
navigateBack: 'navigateBack'
}
const routeTo = ({currentTarget}) => {
let { type = 'navigateTo', url = '', appid = '', delta} = currentTarget.dataset
$route({type, url, appid, delta})
}
const $route = (opts) => {
let { type = 'navigateTo', url = '', appid = '', delta} = opts
if(appid){
wx.navigateToMiniProgram({
appId: appid,
path: url,
envVersion: env_config.test ? 'trial' : 'release',
success(){console.log('小程序跳转成功!')}
})
return
}
if(url){
if(url.indexOf('http') > -1){
wx.setStorageSync('urlAndParams', `${url}`)
route({ url: '../../pages/webView/webView', type })
} else {
route(opts)
}
} else {
delta ? wx.navigateBack(opts) : _toast('功能开发中,敬请关注!')
}
}
const route = (opts) => {
let { type = 'navigateTo', url = ''} = opts
type = types[type] ? type : 'navigateTo'
wx[type].call(wx, { url })
}
module.exports = {
routeTo,
$route
}
<view bindtap="routeTo" data-delta="1">返回上一页</view>
this.$route({delta:1})
<view bindtap="routeTo" data-appid="wx1b4587b5486c9856" data-url="pages/index/index">跳转其他小程序</view>
this.$route({appid:'wx1b4587b5486c9856',url: 'pages/index/index'})
<view bindtap="routeTo" data-url="../../pages/addressList/addressList">地址管理</view>
this.$route({url: '../../pages/addressList/addressList'})
<view bindtap="routeTo" data-url="../../pages/index/index" data-type="switchTab">首页</view>
this.$route({url: '../../pages/index/index',type:'switchTab'})