uni-appリストナビゲーションコンポーネント

2556 ワード

リストナビゲーションコンポーネントの単純なパッケージ実装コンポーネントの共通
効果図クリックでページをジャンプできます
画像リソース
http://www.iconfont.cn/search/index?q=%E7%94%A8%E6%88%B7
uni-app列表导航组件_第1张图片 uni-app列表导航组件_第2张图片
 
コンポーネント名uni-common-go.vue



	export default {
		name:"uni-common-go",
		props:{
			leftIcon:{
				type:String,
				default:require('../static/img/find.png')
			},
			rightIcon:{
				type:String,
				default:require('../static/img/backRight.png')
			},
			leftText:{
				type:String,
				default:'    '
			},
			params:{
				type:String,
				default:'login'
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			goto(date){
				uni.navigateTo({
					url:`../${date}/${date}`
				})
			}
		}
	}




呼び出し方法:
1導入コンポーネント
import UniCommonGo from '../../component/uni-common-go.vue'

2コンポーネントの登録
components:{
			UniCommonGo
		},

3使用
data(){
			return{
				leftIcon:require('../../static/img/rizhi.png'),
				rightIcon:require('../../static/img/backRight.png'),
				leftText:"    1",
				params:"login"
				}

パラメータの説明:
leftIcon:左画像道路力rightIcon:右画像道路力leftText:左文字params:ジャンプのルーティング名