[JavaScript] 纯文本查看 复制代码
<template>
<view class="container container329152">
<u-form-item class="diygw-col-24" label="标题" prop="title">
<u-input :focus="titleFocus" placeholder="请输入提示信息" v-model="title"></u-input>
</u-form-item>
<text v-show="title == 1" class="diygw-col-24 text-clz">
{{ title }}
</text>
<view class="flex flex-wrap diygw-col-24 flex-direction-column">
<scroll-view scroll-x scroll-with-animation class="flex scroll-view flex-wrap diygw-col-24 justify-center flex13-clz">
<view class="flex justify-center flex-nowrap">
<view v-for="(item, index) in tabDatas" :key="index" class="flex flex-wrap diygw-col-0 flex-direction-column items-center flex14-clz" @tap="tabSelect(index)">
<view v-if="tabIndex == index" class="flex flex-wrap diygw-col-24 items-center flex8-clz">
<text class="flex icon1 diygw-col-0 icon1-clz" :class="[item.icon]"></text>
<text class="diygw-text-line1 diygw-col-0">
{{ item.title }}
</text>
</view>
<view v-if="tabIndex != index" class="flex flex-wrap diygw-col-24 items-center flex-clz">
<text class="flex icon2 diygw-col-0 icon2-clz" :class="[item.icon]"></text>
<text class="diygw-text-line1 diygw-col-0">
{{ item.title }}
</text>
</view>
</view>
</view>
</scroll-view>
<text class="diygw-col-24 text13-clz"> 已绑定组件动态数据，导出源码起效。组件数据在上面一层扩组数据里，可以根据动态API的数据来绑定。使用时可删除此提示 </text>
</view>
<view class="flex diygw-col-24">
<button @tap="navigateTo" data-type="page" data-url="/pages/user" data-id="1" class="diygw-btn green radius flex-sub margin-xs button-button-clz">跳转页面</button>
</view>
<view class="clearfix"></view>
</view>
</template>
<script>
export default {
data() {
return {
//用户全局信息
userInfo: {},
//页面传参
globalOption: {},
//自定义全局变量
globalData: {},
titleFocus: false,
title: '',
tabIndex: 0,
tabDatas: [
{ title: '关注', icon: 'diy-icon-home' },
{ title: '精选', icon: 'diy-icon-newshot' },
{ title: '推荐', icon: 'diy-icon-message' },
{ title: '热门', icon: 'diy-icon-my' }
]
};
},
onShareAppMessage(e) {},
onShow() {
this.setCurrentPage(this);
},
onLoad(option) {
this.setCurrentPage(this);
if (option) {
this.setData({
globalOption: this.getOption(option)
});
}
this.init();
},
methods: {
async init() {},
// 调用方法 自定义方法
async clickFunction(param) {
let thiz = this;
console.log(this.title);
},
tabSelect(index) {
this.tabIndex = index;
this.showToast('这里可以回调哟');
}
}
};
</script>
<style lang="scss" scoped>
.text-clz {
margin-left: 30rpx;
padding-top: 10rpx;
padding-left: 10rpx;
width: calc(100% - 30rpx - 30rpx) !important;
padding-bottom: 10rpx;
margin-top: 10rpx;
margin-bottom: 10rpx;
margin-right: 30rpx;
padding-right: 10rpx;
}
.flex13-clz {
margin-left: 10rpx;
padding-top: 10rpx;
padding-left: 10rpx;
width: calc(100% - 10rpx - 10rpx) !important;
padding-bottom: 10rpx;
margin-top: 10rpx;
margin-bottom: 10rpx;
margin-right: 10rpx;
padding-right: 10rpx;
}
.flex14-clz {
padding-top: 0rpx;
padding-left: 10rpx;
padding-bottom: 0rpx;
padding-right: 10rpx;
}
.flex8-clz {
background-color: #eaeaea;
padding-top: 10rpx;
border-bottom-left-radius: 120rpx;
overflow: hidden;
color: #ffffff;
padding-left: 30rpx;
padding-bottom: 10rpx;
border-top-left-radius: 120rpx;
border-top-right-radius: 120rpx;
border-bottom-right-radius: 120rpx;
background-image: linear-gradient(90deg, #f761a1 10%, #b61de0 100%);
padding-right: 30rpx;
}
.icon1-clz {
margin-left: 6rpx;
margin-top: 6rpx;
margin-bottom: 6rpx;
margin-right: 6rpx;
}
.icon1 {
font-size: 32rpx;
}
.flex-clz {
background-color: #eaeaea;
padding-top: 10rpx;
border-bottom-left-radius: 120rpx;
overflow: hidden;
padding-left: 30rpx;
padding-bottom: 10rpx;
border-top-left-radius: 120rpx;
border-top-right-radius: 120rpx;
border-bottom-right-radius: 120rpx;
padding-right: 30rpx;
}
.icon2-clz {
margin-left: 6rpx;
margin-top: 6rpx;
margin-bottom: 6rpx;
margin-right: 6rpx;
}
.icon2 {
font-size: 32rpx;
}
.text13-clz {
margin-left: 10rpx;
padding-top: 10rpx;
padding-left: 10rpx;
width: calc(100% - 10rpx - 10rpx) !important;
padding-bottom: 10rpx;
margin-top: 10rpx;
margin-bottom: 10rpx;
margin-right: 10rpx;
padding-right: 10rpx;
}
.button-button-clz {
margin: 6rpx !important;
}
.container329152 {
}
</style>
