Skip to content

U
uni-app

CoderSmallfan / uni-app
与 Fork 源项目一致

Fork自 DCloud / uni-app

通知 1
Star 1
Fork 0
U
uni-app

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 176a8cf5 编写于 作者: H hulin 提交者： GitHub
浏览文件
操作

Merge pull request #59 from zhetengbiji/master 

更新示例
上级 fa96cbfb 7b34e105
隐藏空白更改
内联 并排
Showing with 1145 addition and 1172 deletion
examples/hello-uniapp/components/tab-nvue/mediaList.nvue
浏览文件 @ 176a8cf5
<template>
<div>
<div class="list-cell" @click="bindClick">
<div class="media-list" v-if="data.title">
<div :class="[isImgRight?'media-image-right':'',isImgLeft?'media-image-left':'']">
<text :class="['media-title',isImgRight||isImgLeft?'media-title2':'']">{{data.title}}</text>
<div v-if="showImg" :class="['image-section',isImgRight?'image-section-right':'',isImgLeft?'image-section-left':'']">
<image :class="['image-list1',isImgRight||isImgLeft?'image-list2':'']" v-if="data.image_url" :src="data.image_url"></image>
<image class="image-list3" v-if="data.image_list" :src="source.url" v-for="(source, i) in data.image_list" :key="i" />
</div>
</div>
<div class="media-foot">
<div class="media-info">
<text class="info-text">{{data.source}}</text>
<text class="info-text">{{data.comment_count}}条评论</text>
<text class="info-text">{{data.datetime}}</text>
</div>
<div class="max-close-view" @click="close">
<div class="close-view"><text class="close">×</text></div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object,
default: {}
}
},
computed: {
isImgRight() {
return this.data.article_type === 2
},
isImgLeft() {
return this.data.article_type === 1
},
showImg() {
return this.data.image_list || this.data.image_url
}
},
methods: {
close(e) {
this.$emit('close');
e.stopPropagation();
},
bindClick() {
this.$emit('click');
}
}
}
</script>
<style>
.list-cell {
width: 750px;
padding: 0 30px;
}
.list-cell:active {
background-color: #eeeeee;
}
.media-list {
flex-direction: column;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c8c7cc;
padding: 20px 0;
}
.media-image-right {
flex-direction: row;
}
.media-image-left {
flex-direction: row-reverse;
}
.media-title {
flex: 1;
}
.media-title {
lines: 3;
text-overflow: ellipsis;
font-size: 32px;
color: #555555;
}
.media-title2 {
flex: 1;
margin-top: 6px;
line-height: 40px;
}
.image-section {
margin-top: 20px;
flex-direction: row;
justify-content: space-between;
}
.image-section-right {
margin-top: 0px;
margin-left: 10px;
width: 225px;
height: 146px;
}
.image-section-left {
margin-top: 0px;
margin-right: 10px;
width: 225px;
height: 146px;
}
.image-list1 {
width: 690px;
height: 481px;
}
.image-list2 {
width: 225px;
height: 146px;
}
.image-list3 {
width: 225px;
height: 146px;
}
.media-info {
flex-direction: row;
}
.info-text {
margin-right: 20px;
color: #999999;
font-size: 28px;
}
.media-foot {
margin-top: 20px;
flex-direction: row;
justify-content: space-between;
}
.max-close-view{
justify-content:flex-end;
flex-direction: row;
height: 40px;
width: 80px;
}
.close-view {
border-style: solid;
border-width: 1px;
border-color: #999999;
border-radius: 10px;
justify-content: center;
height: 30px;
width: 40px;
}
.close {
text-align: center;
color: #999999;
font-size: 28px;
}
</style>
<template>
<div>
<div class="list-cell" @click="bindClick">
<div class="media-list" v-if="data.title">
<div :class="[isImgRight?'media-image-right':'',isImgLeft?'media-image-left':'']">
<text :class="['media-title',isImgRight||isImgLeft?'media-title2':'']">{{data.title}}</text>
<div v-if="showImg" :class="['image-section',isImgRight?'image-section-right':'',isImgLeft?'image-section-left':'']">
<image :class="['image-list1',isImgRight||isImgLeft?'image-list2':'']" v-if="data.image_url" :src="data.image_url"></image>
<image class="image-list3" v-if="data.image_list" :src="source.url" v-for="(source, i) in data.image_list" :key="i" />
</div>
</div>
<div class="media-foot">
<div class="media-info">
<text class="info-text">{{data.source}}</text>
<text class="info-text">{{data.comment_count}}条评论</text>
<text class="info-text">{{data.datetime}}</text>
</div>
<div class="max-close-view" @click="close">
<div class="close-view"><text class="close">×</text></div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object,
default: {}
}
},
computed: {
isImgRight() {
return this.data.article_type === 2
},
isImgLeft() {
return this.data.article_type === 1
},
showImg() {
return this.data.image_list || this.data.image_url
}
},
methods: {
close(e) {
this.$emit('close');
e.stopPropagation();
},
bindClick() {
this.$emit('click');
}
}
}
</script>
<style>
.list-cell {
width: 750px;
padding: 0 30px;
}
.list-cell:active {
background-color: #eeeeee;
}
.media-list {
flex-direction: column;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c8c7cc;
padding: 20px 0;
}
.media-image-right {
flex-direction: row;
}
.media-image-left {
flex-direction: row-reverse;
}
.media-title {
flex: 1;
}
.media-title {
lines: 3;
text-overflow: ellipsis;
font-size: 32px;
color: #555555;
}
.media-title2 {
flex: 1;
margin-top: 6px;
line-height: 40px;
}
.image-section {
margin-top: 20px;
flex-direction: row;
justify-content: space-between;
}
.image-section-right {
margin-top: 0px;
margin-left: 10px;
width: 225px;
height: 146px;
}
.image-section-left {
margin-top: 0px;
margin-right: 10px;
width: 225px;
height: 146px;
}
.image-list1 {
width: 690px;
height: 481px;
}
.image-list2 {
width: 225px;
height: 146px;
}
.image-list3 {
width: 225px;
height: 146px;
}
.media-info {
flex-direction: row;
}
.info-text {
margin-right: 20px;
color: #999999;
font-size: 28px;
}
.media-foot {
margin-top: 20px;
flex-direction: row;
justify-content: space-between;
}
.max-close-view{
justify-content:flex-end;
flex-direction: row;
height: 40px;
width: 80px;
}
.close-view {
border-style: solid;
border-width: 1px;
border-color: #999999;
border-radius: 10px;
justify-content: center;
height: 30px;
width: 40px;
}
.close {
text-align: center;
color: #999999;
font-size: 28px;
}
</style>
examples/hello-uniapp/components/tab-nvue/tabBar.nvue
浏览文件 @ 176a8cf5
<script>
export default {
render(createElement) {
const vnodes = this.$slots.default;
if (vnodes && vnodes.length) {
for (let i = 0; i < vnodes.length; i++) {
let vnode = vnodes[i];
if (!vnode.data) {
vnode.data = Object.create(null)
}
if (!vnode.data.on) {
vnode.data.on = Object.create(null)
}
vnode.data.on.click = this._change;
}
}
return createElement('scroller', {//如果需要左右滑动用scroller，不需要的话用div就行,添加个属性需要时将scroller添加 children
attrs: {
scrollDirection:'horizontal',
showScrollbar:'false'
},
style: {
height:'100px',
width:'750px',
flexDirection:'row'
// justifyContent: 'space-around',
// alignItems:'center'
}
}, this.$slots.default)
},
methods:{
_change(e){
let ret = {
index:e.index
}
if(e.type === 'click'){
let target = e.target;
ret.index = target.parentNode.children.findIndex(node=>node===target)
}
this.$emit('_tabBarClick', ret)
}
}
}
</script>
<script>
export default {
render(createElement) {
const vnodes = this.$slots.default;
if (vnodes && vnodes.length) {
for (let i = 0; i < vnodes.length; i++) {
let vnode = vnodes[i];
if (!vnode.data) {
vnode.data = Object.create(null)
}
if (!vnode.data.on) {
vnode.data.on = Object.create(null)
}
vnode.data.on.click = this._change;
}
}
return createElement('div', {//如果需要左右滑动用scroller，不需要的话用div就行,添加个属性需要时将scroller添加 children
style: {
height:'100px',
width:'750px',
flexDirection:'row',
borderBottomWidth: "1px",
borderColor: "#c8c7cc",
borderBottomStyle: "solid"
}
}, [
createElement('scroller', {
attrs: {
scrollDirection:'horizontal',
showScrollbar:'false'
},
style: {
height:'100px',
width:'750px',
flexDirection:'row'
}
}, this.$slots.default)
])
},
methods:{
_change(e){
let ret = {
index:e.index
}
if(e.type === 'click'){
let target = e.target;
ret.index = target.parentNode.children.findIndex(node=>node===target)
}
this.$emit('_tabBarClick', ret)
}
}
}
</script>
examples/hello-uniapp/components/tab-nvue/tabContent.nvue
浏览文件 @ 176a8cf5
<script>
export default {
props: {
index: {
type: Number,
default: 0
}
},
data() {
return {
tabIndex:this.index
}
},
watch:{
index(oldV,newV){
console.log(oldV,newV);
}
},
render(createElement) {
return createElement('slider', {
style: {
flex: 1
},
attrs: {
index:this.tabIndex,
infinite: false
}
}, this.$slots.default)
}
}
<script>
export default {
props: {
index: {
type: Number,
default: 0
}
},
data() {
return {
tabIndex:this.index
}
},
watch:{
index(oldV,newV){
console.log(oldV,newV);
}
},
render(createElement) {
return createElement('slider', {
style: {
flex: 1
},
attrs: {
index:this.tabIndex,
infinite: false
}
}, this.$slots.default)
}
}
</script>
examples/hello-uniapp/components/tab-nvue/tabs.nvue
浏览文件 @ 176a8cf5
<script>
import tabContent from './tabContent.nvue'
export default {
props: {
index: {
type: Number,
default: 0
}
},
data() {
return {
tabIndex: this.index
}
},
components: {
tabContent,
},
render(createElement) {
const vnodes = this.$slots.default;
const newVNodes = []
if (vnodes && vnodes.length) {
for (let i = 0; i < vnodes.length; i++) {
let vnode = vnodes[i]
if (!vnode || !vnode.componentOptions) {
continue
}
if (vnode.componentOptions.tag === 'tab-content') {
const newVNode = createElement('tab-content', {
staticClass: vnode.data.staticClass,
'class':vnode.data['class'],
style:vnode.data.style
}, vnode.componentOptions.children)
if (!newVNode.data) {
newVNode.data = Object.create(null)
}
if (!newVNode.data.attrs) {
newVNode.data.attrs = Object.create(null)
}
if (!newVNode.data.props) {
newVNode.data.props = Object.create(null)
}
if (!newVNode.data.on) {
newVNode.data.on = Object.create(null)
}
newVNode.data.attrs.index = this.tabIndex
newVNode.data.props.index = this.tabIndex
newVNode.data.on.change = this._change
newVNodes.push(newVNode)
}
if (vnode.componentOptions.tag === 'tab-bar') {
if (!vnode.componentOptions.listeners) { //监听子元素传递过来的事件
vnode.componentOptions.listeners = Object.create(null)
}
vnode.componentOptions.listeners._tabBarClick = this._tabBarClick;
newVNodes.push(vnode)
}
}
}
var newNode = createElement('div', {
style: {
flex: 1,
flexDirection: 'column'
},
on: {
change2: this._change2
}
}, newVNodes);
return newNode;
},
methods: {
_tabBarClick(e) {
this.tabIndex = e.index;
this.$emit('change', e);
},
_change(e) {
this.tabIndex = e.index;
this.$emit('change', {
index:e.index
})
}
}
}
<script>
import tabContent from './tabContent.nvue'
export default {
props: {
index: {
type: Number,
default: 0
}
},
data() {
return {
tabIndex: this.index
}
},
components: {
tabContent,
},
render(createElement) {
const vnodes = this.$slots.default;
const newVNodes = []
if (vnodes && vnodes.length) {
for (let i = 0; i < vnodes.length; i++) {
let vnode = vnodes[i]
if (!vnode || !vnode.componentOptions) {
continue
}
if (vnode.componentOptions.tag === 'tab-content') {
const newVNode = createElement('tab-content', {
staticClass: vnode.data.staticClass,
'class':vnode.data['class'],
style:vnode.data.style
}, vnode.componentOptions.children)
if (!newVNode.data) {
newVNode.data = Object.create(null)
}
if (!newVNode.data.attrs) {
newVNode.data.attrs = Object.create(null)
}
if (!newVNode.data.props) {
newVNode.data.props = Object.create(null)
}
if (!newVNode.data.on) {
newVNode.data.on = Object.create(null)
}
newVNode.data.attrs.index = this.index
newVNode.data.props.index = this.index
newVNode.data.on.change = this._change
newVNodes.push(newVNode)
}
if (vnode.componentOptions.tag === 'tab-bar') {
if (!vnode.componentOptions.listeners) { //监听子元素传递过来的事件
vnode.componentOptions.listeners = Object.create(null)
}
vnode.componentOptions.listeners._tabBarClick = this._tabBarClick;
newVNodes.push(vnode)
}
}
}
var newNode = createElement('div', {
style: {
flex: 1,
flexDirection: 'column'
},
on: {
change2: this._change2
}
}, newVNodes);
return newNode;
},
methods: {
_tabBarClick(e) {
this.tabIndex = e.index;
this.$emit('change', e);
},
_change(e) {
this.tabIndex = e.index;
this.$emit('change', {
index:e.index
})
}
}
}
</script>
examples/hello-uniapp/components/uni-badge.vue
浏览文件 @ 176a8cf5
<template>
<text class="uni-badge" v-if="text" :class="[inverted === true ? 'uni-badge-inverted' : '','uni-badge-'+type]" @click="onClick()">
{{text}}
</text>
</template>
<script>
export default {
props: {
type: String,
inverted:{
type: Boolean,
default: false
},
text:String
},
methods: {
onClick() {
this.$emit('click')
}
}
}
</script>
<style>
.uni-badge,.uni-badge-default {
font-family: 'Helvetica Neue',Helvetica,sans-serif;
box-sizing: border-box;
font-size: 12px;
line-height: 1;
display: inline-block;
padding: 3px 6px;
color: #333;
border-radius: 100px;
}
.uni-badge.uni-badge-inverted {
padding: 0 5px 0 0;
color: #929292;
background-color: transparent
}
.uni-badge-primary {
color: #fff;
background-color: #007aff
}
.uni-badge-blue.uni-badge-inverted,
.uni-badge-primary.uni-badge-inverted {
color: #007aff;
background-color: transparent
}
.uni-badge-green,
.uni-badge-success {
color: #fff;
background-color: #4cd964;
}
.uni-badge-green.uni-badge-inverted,
.uni-badge-success.uni-badge-inverted {
color: #4cd964;
background-color: transparent
}
.uni-badge-warning,
.uni-badge-yellow {
color: #fff;
background-color: #f0ad4e
}
.uni-badge-warning.uni-badge-inverted,
.uni-badge-yellow.uni-badge-inverted {
color: #f0ad4e;
background-color: transparent
}
.uni-badge-danger,
.uni-badge-red {
color: #fff;
background-color: #dd524d
}
.uni-badge-danger.uni-badge-inverted,
.uni-badge-red.uni-badge-inverted {
color: #dd524d;
background-color: transparent
}
.uni-badge-purple,
.uni-badge-royal {
color: #fff;
background-color: #8a6de9
}
.uni-badge-purple.uni-badge-inverted,
.uni-badge-royal.uni-badge-inverted {
color: #8a6de9;
background-color: transparent
}
<template>
<text class="uni-badge" v-if="text" :class="[inverted === true ? 'uni-badge-inverted' : '','uni-badge-'+type]" @click="onClick()">
{{text}}
</text>
</template>
<script>
export default {
props: {
type: String,
inverted:{
type: Boolean,
default: false
},
text:String
},
methods: {
onClick() {
this.$emit('click')
}
}
}
</script>
<style>
.uni-badge,.uni-badge-default {
font-family: 'Helvetica Neue',Helvetica,sans-serif;
box-sizing: border-box;
font-size: 12px;
line-height: 1;
display: inline-block;
padding: 3px 6px;
color: #333;
border-radius: 100px;
}
.uni-badge.uni-badge-inverted {
padding: 0 5px 0 0;
color: #929292;
background-color: transparent
}
.uni-badge-primary {
color: #fff;
background-color: #007aff
}
.uni-badge-blue.uni-badge-inverted,
.uni-badge-primary.uni-badge-inverted {
color: #007aff;
background-color: transparent
}
.uni-badge-green,
.uni-badge-success {
color: #fff;
background-color: #4cd964;
}
.uni-badge-green.uni-badge-inverted,
.uni-badge-success.uni-badge-inverted {
color: #4cd964;
background-color: transparent
}
.uni-badge-warning,
.uni-badge-yellow {
color: #fff;
background-color: #f0ad4e
}
.uni-badge-warning.uni-badge-inverted,
.uni-badge-yellow.uni-badge-inverted {
color: #f0ad4e;
background-color: transparent
}
.uni-badge-danger,
.uni-badge-red {
color: #fff;
background-color: #dd524d
}
.uni-badge-danger.uni-badge-inverted,
.uni-badge-red.uni-badge-inverted {
color: #dd524d;
background-color: transparent
}
.uni-badge-purple,
.uni-badge-royal {
color: #fff;
background-color: #8a6de9
}
.uni-badge-purple.uni-badge-inverted,
.uni-badge-royal.uni-badge-inverted {
color: #8a6de9;
background-color: transparent
}
</style>
examples/hello-uniapp/components/uni-drawer.vue
浏览文件 @ 176a8cf5
<template>
<view class="uni-drawer" :class="{'uni-drawer-visible':visible,'uni-drawer-right':rightMode}">
<view v-if="showMask" class="uni-drawer-mask" @tap="close"></view>
<view class="uni-drawer-content">
<slot></slot>
</view>
</view>
<view class="uni-drawer" :catchtouchmove="catchtouchmove" :class="{'uni-drawer-visible':visible,'uni-drawer-right':rightMode}">
<view v-if="showMask" class="uni-drawer-mask" @tap="close"></view>
<view class="uni-drawer-content">
<slot></slot>
</view>
</view>
</template>
<script>
export default {
props: {
/**
* 显示状态
*/
visible: {
type: Boolean,
default: false
},
/**
* 显示模式（左、右），只在初始化生效
*/
mode: String,
/**
* 蒙层显示状态
*/
mask: {
type: [Boolean, String],
default: true
}
},
data() {
return {
rightMode: false
}
},
computed: {
showMask() {
return String(this.mask) === 'true'
}
},
created() {
this.rightMode = this.mode === 'right'
},
methods: {
close() {
this.$emit('close')
}
}
}
export default {
props: {
/**
* 显示状态
*/
visible: {
type: Boolean,
default: false
},
/**
* 显示模式（左、右），只在初始化生效
*/
mode: String,
/**
* 蒙层显示状态
*/
mask: {
type: [Boolean, String],
default: true
}
},
data() {
return {
rightMode: false,
catchtouchmove: false
}
},
computed: {
showMask() {
return String(this.mask) === 'true'
}
},
created() {
this.rightMode = this.mode === 'right'
//#ifdef MP-WEIXIN
this.catchtouchmove = true
//#endif
},
methods: {
close() {
this.$emit('close')
}
}
}
</script>
<style scoped>
.uni-drawer {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
visibility: hidden;
.uni-drawer {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
visibility: hidden;
z-index: 99;
}
}
.uni-drawer>.uni-drawer-mask {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
}
.uni-drawer>.uni-drawer-mask {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
}
.uni-drawer>.uni-drawer-content {
display: block;
position: absolute;
top: 0;
left: 0;
width: 61.8%;
height: 100%;
background: #FFFFFF;
transition: all 0.3s ease-out;
transform: translatex(-100%);
}
.uni-drawer>.uni-drawer-content {
display: block;
position: absolute;
top: 0;
left: 0;
width: 61.8%;
height: 100%;
background: #FFFFFF;
transition: all 0.3s ease-out;
transform: translatex(-100%);
}
.uni-drawer.uni-drawer-right>.uni-drawer-content {
left: auto;
right: 0;
transform: translatex(100%);
}
.uni-drawer.uni-drawer-right>.uni-drawer-content {
left: auto;
right: 0;
transform: translatex(100%);
}
.uni-drawer.uni-drawer-visible {
visibility: visible;
}
.uni-drawer.uni-drawer-visible {
visibility: visible;
}
.uni-drawer.uni-drawer-visible>.uni-drawer-mask {
display: block;
}
.uni-drawer.uni-drawer-visible>.uni-drawer-mask {
display: block;
}
.uni-drawer.uni-drawer-visible>.uni-drawer-content {
transform: translatex(0);
}
.uni-drawer.uni-drawer-visible>.uni-drawer-content {
transform: translatex(0);
}
</style>
examples/hello-uniapp/manifest.json
浏览文件 @ 176a8cf5
......@@ -55,10 +55,12 @@
"<uses-permission android:name=\"android.permission.RECEIVE_USER_PRESENT\"/>"
]
},
"ios" : {},
/* ios打包配置 */
"sdkConfigs" : {},
/* SDK配置 */
"ios" : {/* ios打包配置 */
"UIBackgroundModes":["audio"]
},
"sdkConfigs" : {/* SDK配置 */
},
"orientation" : [ "portrait-primary" ]
}
},
......
examples/hello-uniapp/pages.json
浏览文件 @ 176a8cf5
......@@ -585,7 +585,8 @@
"fontSize" : "22px"
}
]
}
},
"bounce" : "none"
}
}
},
......
examples/hello-uniapp/pages/component/movable-view/movable-view.vue
浏览文件 @ 176a8cf5
<template>
<view class="page-body">
<view class="page-section">
<view class="page-section-title">movable-view区域小于movable-area</view>
<movable-area>
<movable-view :x="x" :y="y" direction="all" @change="onChange">text</movable-view>
</movable-area>
</view>
<view class="btn-area">
<button @tap="tap" class="page-body-button" type="default">click me to move to (30px, 30px)</button>
</view>
<view class="page-section">
<view class="page-section-title">movable-view区域大于movable-area</view>
<movable-area>
<movable-view class="max" direction="all">text</movable-view>
</movable-area>
</view>
<view class="page-section">
<view class="page-section-title">只可以横向移动</view>
<movable-area>
<movable-view direction="horizontal">text</movable-view>
</movable-area>
</view>
<view class="page-section">
<view class="page-section-title">只可以纵向移动</view>
<movable-area>
<movable-view direction="vertical">text</movable-view>
</movable-area>
</view>
<view class="page-section">
<view class="page-section-title">可超出边界</view>
<movable-area>
<movable-view direction="all" out-of-bounds>text</movable-view>
</movable-area>
</view>
<view class="page-section">
<view class="page-section-title">带有惯性</view>
<movable-area>
<movable-view direction="all" inertia>text</movable-view>
</movable-area>
</view>
<view class="page-section">
<view class="page-section-title">可放缩</view>
<movable-area scale-area>
<movable-view direction="all" @scale="onScale" scale scale-min="0.5" scale-max="4" :scale-value="scale">text</movable-view>
</movable-area>
</view>
<view class="btn-area">
<button @tap="tap2" class="page-body-button" type="default">click me to scale to 3.0</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
x: 0,
y: 0,
scale: 2,
old: {
x: 0,
y: 0,
scale: 2
}
}
},
methods: {
tap: function(e) {
// 解决view层不同步的问题
this.x = this.old.x
this.y = this.old.y
this.$nextTick(function() {
this.x = 30
this.y = 30
})
},
tap2() {
// 解决view层不同步的问题
this.scale = this.old.scale
this.scale = this.old.scale
this.$nextTick(function() {
this.scale = 3
})
},
onChange: function(e) {
this.old.x = e.detail.x
this.old.y = e.detail.y
},
onScale: function(e) {
this.old.scale = e.detail.scale
}
}
}
</script>
<style>
movable-view {
display: flex;
align-items: center;
justify-content: center;
height: 100rpx;
width: 100rpx;
background-color: #007AFF;
color: #fff;
}
movable-area {
height: 400rpx;
width: 400rpx;
margin: 50rpx;
background-color: #ccc;
overflow: hidden;
}
.max {
width: 600rpx;
height: 600rpx;
}
.page-section {
width: 100%;
margin-bottom: 60rpx;
}
.page-section:last-child {
margin-bottom: 0;
}
.page-section-title {
font-size: 28rpx;
color: #999999;
margin-bottom: 10rpx;
padding-left: 30rpx;
padding-right: 30rpx;
}
<template>
<view class="page-body">
<view class="page-section">
<view class="page-section-title">movable-view区域小于movable-area</view>
<movable-area>
<movable-view :x="x" :y="y" direction="all" @change="onChange">text</movable-view>
</movable-area>
</view>
<view class="btn-area">
<button @tap="tap" class="page-body-button" type="default">click me to move to (30px, 30px)</button>
</view>
<view class="page-section">
<view class="page-section-title">movable-view区域大于movable-area</view>
<movable-area>
<movable-view class="max" direction="all">text</movable-view>
</movable-area>
</view>
<view class="page-section">
<view class="page-section-title">只可以横向移动</view>
<movable-area>
<movable-view direction="horizontal">text</movable-view>
</movable-area>
</view>
<view class="page-section">
<view class="page-section-title">只可以纵向移动</view>
<movable-area>
<movable-view direction="vertical">text</movable-view>
</movable-area>
</view>
<view class="page-section">
<view class="page-section-title">可超出边界</view>
<movable-area>
<movable-view direction="all" out-of-bounds>text</movable-view>
</movable-area>
</view>
<view class="page-section">
<view class="page-section-title">带有惯性</view>
<movable-area>
<movable-view direction="all" inertia>text</movable-view>
</movable-area>
</view>
<view class="page-section">
<view class="page-section-title">可放缩</view>
<movable-area scale-area>
<movable-view direction="all" @scale="onScale" scale scale-min="0.5" scale-max="4" :scale-value="scale">text</movable-view>
</movable-area>
</view>
<view class="btn-area">
<button @tap="tap2" class="page-body-button" type="default">click me to scale to 3.0</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
x: 0,
y: 0,
scale: 2,
old: {
x: 0,
y: 0,
scale: 2
}
}
},
methods: {
tap: function(e) {
// 解决view层不同步的问题
this.x = this.old.x
this.y = this.old.y
this.$nextTick(function() {
this.x = 30
this.y = 30
})
},
tap2() {
// 解决view层不同步的问题
this.scale = this.old.scale
this.scale = this.old.scale
this.$nextTick(function() {
this.scale = 3
})
},
onChange: function(e) {
this.old.x = e.detail.x
this.old.y = e.detail.y
},
onScale: function(e) {
this.old.scale = e.detail.scale
}
}
}
</script>
<style>
movable-view {
display: flex;
align-items: center;
justify-content: center;
height: 100rpx;
width: 100rpx;
background-color: #007AFF;
color: #fff;
}
movable-area {
height: 400rpx;
width: 400rpx;
margin: 50rpx;
background-color: #ccc;
overflow: hidden;
}
.max {
width: 600rpx;
height: 600rpx;
}
.page-section {
width: 100%;
margin-bottom: 60rpx;
}
.page-section:last-child {
margin-bottom: 0;
}
.page-section-title {
font-size: 28rpx;
color: #999999;
margin-bottom: 10rpx;
padding-left: 30rpx;
padding-right: 30rpx;
}
</style>
examples/hello-uniapp/pages/template/comments/comments.vue 100644 → 100755
浏览文件 @ 176a8cf5
<template>
<view class="grace-padding">
<!-- 评论区 start -->
<view class="grace-comment">
<view class="grace-comment-list">
<view class="grace-comment-face"><image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image></view>
<view class="grace-comment-body">
<view class="grace-comment-top">
<text>刘美丽</text>
<text class="grace-iconfont icon-zan"></text>
</view>
<view class="grace-comment-date">
<text>08/10 08:12</text>
<text>102</text>
</view>
<view class="grace-comment-content">上天呀！我渴望与你相知相惜，长存此心永不褪减。</view>
</view>
</view>
<view class="grace-comment-list">
<view class="grace-comment-face"><image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image></view>
<view class="grace-comment-body">
<view class="grace-comment-top">
<text>马克一天</text>
<text class="grace-iconfont icon-zan grace-comment-zan"> 100</text>
</view>
<view class="grace-comment-content">除非巍巍群山消逝不见，除非滔滔江水干涸枯竭。除非凛凛寒冬雷声翻滚，除非炎炎酷暑白雪纷飞，除非天地相交聚合连接，直到这样的事情全都发生时，我才敢将对你的情意抛弃决绝！</view>
</view>
</view>
<view class="grace-comment-list">
<view class="grace-comment-face"><image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image></view>
<view class="grace-comment-body">
<view class="grace-comment-top">
<text>今生缘</text>
<text class="grace-iconfont icon-zan"> 66</text>
</view>
<view class="grace-comment-content">人面不知何处去，桃花依旧笑春风。</view>
<view class="grace-comment-date">
<text>08/10 07:55</text>
</view>
</view>
</view>
<view class="grace-comment-list">
<view class="grace-comment-face"><image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image></view>
<view class="grace-comment-body">
<view class="grace-comment-top">
<text>小猫咪</text>
<text class="grace-iconfont icon-zan"> 120</text>
</view>
<view class="grace-comment-content">海上生明月，天涯共此时。。</view>
<view class="grace-comment-date">
<text>2天前<text class="grace-comment-replay-btn">5回复</text></text>
</view>
</view>
</view>
</view>
<!-- 评论区 end -->
<template>
<view class="grace-padding">
<!-- 评论区 start -->
<view class="grace-comment">
<view class="grace-comment-list">
<view class="grace-comment-face"><image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image></view>
<view class="grace-comment-body">
<view class="grace-comment-top">
<text>刘美丽</text>
<text class="grace-iconfont icon-zan"></text>
</view>
<view class="grace-comment-date">
<text>08/10 08:12</text>
<text>102</text>
</view>
<view class="grace-comment-content">上天呀！我渴望与你相知相惜，长存此心永不褪减。</view>
</view>
</view>
<view class="grace-comment-list">
<view class="grace-comment-face"><image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image></view>
<view class="grace-comment-body">
<view class="grace-comment-top">
<text>马克一天</text>
<text class="grace-iconfont icon-zan grace-comment-zan"> 100</text>
</view>
<view class="grace-comment-content">除非巍巍群山消逝不见，除非滔滔江水干涸枯竭。除非凛凛寒冬雷声翻滚，除非炎炎酷暑白雪纷飞，除非天地相交聚合连接，直到这样的事情全都发生时，我才敢将对你的情意抛弃决绝！</view>
</view>
</view>
<view class="grace-comment-list">
<view class="grace-comment-face"><image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image></view>
<view class="grace-comment-body">
<view class="grace-comment-top">
<text>今生缘</text>
<text class="grace-iconfont icon-zan"> 66</text>
</view>
<view class="grace-comment-content">人面不知何处去，桃花依旧笑春风。</view>
<view class="grace-comment-date">
<text>08/10 07:55</text>
</view>
</view>
</view>
<view class="grace-comment-list">
<view class="grace-comment-face"><image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image></view>
<view class="grace-comment-body">
<view class="grace-comment-top">
<text>小猫咪</text>
<text class="grace-iconfont icon-zan"> 120</text>
</view>
<view class="grace-comment-content">海上生明月，天涯共此时。。</view>
<view class="grace-comment-date">
<text>2天前<text class="grace-comment-replay-btn">5回复</text></text>
</view>
</view>
</view>
</view>
<!-- 评论区 end -->
</view>
</template>
<script>
export default {
data:{
title:"评论界面"
data:{
title:"评论界面"
}
}
</script>
<style>
view{display:flex; flex-wrap:wrap; font-size:28upx; width:100%; height:auto; align-items:flex-start;}
<style>
view{display:flex; flex-wrap:wrap; font-size:28upx; width:100%; height:auto; align-items:flex-start;}
.grace-padding{padding:2%; width:96%;}
.grace-comment{padding:5rpx 0;}
.grace-comment-list{flex-wrap:nowrap; padding:10rpx 0; margin:10rpx 0;}
.grace-comment-face{width:70upx; height:70upx; border-radius:100%; margin-right:20upx; flex-shrink:0; overflow:hidden;}
.grace-comment-face image{width:100%; border-radius:100%;}
.grace-comment-body{width:100%;}
.grace-comment-top{line-height:1.5em; justify-content:space-between;}
.grace-comment-top text{color:#0A98D5; font-size:24upx;}
.grace-comment-top text:last-child{color:#666666;}
.grace-comment-date{line-height:1.5em; justify-content:space-between;}
.grace-comment-date text{color:#666666; font-size:24upx;}
.grace-comment-content{line-height:1.6em; font-size:28upx; padding:8rpx 0;}
.grace-comment-zan{color:#0A98D5 !important;}
.grace-comment{padding:5rpx 0;}
.grace-comment-list{flex-wrap:nowrap; padding:10rpx 0; margin:10rpx 0;}
.grace-comment-face{width:70upx; height:70upx; border-radius:100%; margin-right:20upx; flex-shrink:0; overflow:hidden;}
.grace-comment-face image{width:100%; border-radius:100%;}
.grace-comment-body{width:100%;}
.grace-comment-top{line-height:1.5em; justify-content:space-between;}
.grace-comment-top text{color:#0A98D5; font-size:24upx;}
.grace-comment-top text:last-child{color:#666666;}
.grace-comment-date{line-height:1.5em; justify-content:space-between;}
.grace-comment-date text{color:#666666; font-size:24upx;}
.grace-comment-content{line-height:1.6em; font-size:28upx; padding:8rpx 0;}
.grace-comment-zan{color:#0A98D5 !important;}
.grace-comment-replay-btn{background:#F4F5F6; font-size:24upx; padding:8rpx 15upx; border-radius:30upx; color:#333 !important; margin:0 10upx;}
</style>
examples/hello-uniapp/pages/template/scrollmsg/scrollmsg.vue 100644 → 100755
浏览文件 @ 176a8cf5
<template>
<view class="page">
<view style="justify-content:center; line-height:60upx; margin-top:30upx;">
竖向滚动
</view>
<view class="grace-padding">
<view class="grace-swiper-msg">
<view class="grace-swiper-msg-icon">
<image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image>
</view>
<swiper vertical="true" autoplay="true" circular="true" interval="3000">
<swiper-item>
<navigator>内容......</navigator>
</swiper-item>
<swiper-item>
<navigator>内容......</navigator>
</swiper-item>
<swiper-item>
<navigator>内容......</navigator>
</swiper-item>
</swiper>
</view>
<view style="justify-content:center; line-height:60upx; text-align:center; width:100%;">
横向滚动
</view>
<view class="grace-swiper-msg">
<view class="grace-swiper-msg-icon">
<image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image>
</view>
<swiper autoplay="true" circular="true" interval="5000">
<swiper-item>
<navigator>内容......</navigator>
</swiper-item>
<swiper-item>
<navigator>内容......</navigator>
</swiper-item>
<swiper-item>
<navigator>内容......</navigator>
</swiper-item>
</swiper>
</view>
<view style="justify-content:center; line-height:60upx; margin-top:30upx;">
竖向滚动
</view>
<view class="grace-padding">
<view class="grace-swiper-msg">
<view class="grace-swiper-msg-icon">
<image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image>
</view>
<swiper vertical="true" autoplay="true" circular="true" interval="3000">
<swiper-item>
<navigator>内容......</navigator>
</swiper-item>
<swiper-item>
<navigator>内容......</navigator>
</swiper-item>
<swiper-item>
<navigator>内容......</navigator>
</swiper-item>
</swiper>
</view>
<view style="justify-content:center; line-height:60upx; text-align:center; width:100%;">
横向滚动
</view>
<view class="grace-swiper-msg">
<view class="grace-swiper-msg-icon">
<image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image>
</view>
<swiper autoplay="true" circular="true" interval="5000">
<swiper-item>
<navigator>内容......</navigator>
</swiper-item>
<swiper-item>
<navigator>内容......</navigator>
</swiper-item>
<swiper-item>
<navigator>内容......</navigator>
</swiper-item>
</swiper>
</view>
</view>
</view>
</template>
<script>
export default {
data:{
title:"滚动公告"
data:{
title:"滚动公告"
}
}
</script>
<style>
.grace-padding{padding:2%; width:96%;}
<style>
.grace-padding{padding:2%; width:96%;}
view{display:flex; flex-wrap:wrap; font-size:28upx; height:auto; width:100%;}
.grace-swiper-msg{width:100%; padding:12rpx 0; flex-wrap:nowrap;}
.grace-swiper-msg-icon{width:50upx; margin-right:20upx;}
.grace-swiper-msg-icon image{width:100%; flex-shrink:0;}
.grace-swiper-msg swiper{width:100%; height:50upx;}
.grace-swiper-msg{width:100%; padding:12rpx 0; flex-wrap:nowrap;}
.grace-swiper-msg-icon{width:50upx; margin-right:20upx;}
.grace-swiper-msg-icon image{width:100%; flex-shrink:0;}
.grace-swiper-msg swiper{width:100%; height:50upx;}
.grace-swiper-msg swiper-item{line-height:50upx;}
</style>
examples/hello-uniapp/pages/template/steps/steps.vue 100644 → 100755
浏览文件 @ 176a8cf5
<template>
<view class="page">
<template>
<view class="page">
<page-head :title="title"></page-head>
<view class="grace-steps">
<view class="step">
<view class="step-circle">1</view>
<view class="step-content">
<view class="step-title">步骤1</view>
</view>
</view>
<view class="step current">
<view class="step-circle">2</view>
<view class="step-content">
<view class="step-title">步骤2</view>
</view>
</view>
<view class="step">
<view class="step-circle">3</view>
<view class="step-content">
<view class="step-title">步骤3</view>
</view>
</view>
</view>
<view style="padding:30upx 0; text-align:center;">
您也可以把数字步骤改成icon图标哦 ^_^
<view class="grace-steps">
<view class="step">
<view class="step-circle">1</view>
<view class="step-content">
<view class="step-title">步骤1</view>
</view>
</view>
<view class="step current">
<view class="step-circle">2</view>
<view class="step-content">
<view class="step-title">步骤2</view>
</view>
</view>
<view class="step">
<view class="step-circle">3</view>
<view class="step-content">
<view class="step-title">步骤3</view>
</view>
</view>
</view>
<view style="padding:30upx 0; text-align:center;">
您也可以把数字步骤改成icon图标哦 ^_^
</view>
</view>
</template>
<script>
export default {
data:{
title:"步骤"
data:{
title:"步骤"
}
}
</script>
<style>
page{background:#FFFFFF;}
.grace-steps{padding:20rpx 0; display:flex; width:100%; flex-wrap:wrap;}
.grace-steps view{display:flex; width:100%; flex-wrap:wrap; float:none;}
.grace-steps .step{width:31.3%; margin:0 1%; flex-wrap:nowrap;}
.grace-steps .step-circle{width:50upx; height:50upx; border-radius:50upx; background:#F1F1F3; justify-content:center; line-height:50upx; flex-shrink:0; margin-right:15upx; color:#666; font-size:28upx;}
.grace-steps .step-content{width:100%; height:22upx; border-bottom:1px solid #F1F1F3;}
.grace-steps .step-title{line-height:50upx; height:50upx; background:#FFFFFF; width:auto; overflow:hidden; padding-right:8upx;}
.grace-steps .current .step-circle{background:#00B26A; color:#FFFFFF;}
.grace-steps .current .step-content{border-color:#00B26A;}
.grace-steps .current .step-title{color:#00B26A;}
<style>
page{background:#FFFFFF;}
.grace-steps{padding:20rpx 0; display:flex; width:100%; flex-wrap:wrap;}
.grace-steps view{display:flex; width:100%; flex-wrap:wrap; float:none;}
.grace-steps .step{width:31.3%; margin:0 1%; flex-wrap:nowrap;}
.grace-steps .step-circle{width:50upx; height:50upx; border-radius:50upx; background:#F1F1F3; justify-content:center; line-height:50upx; flex-shrink:0; margin-right:15upx; color:#666; font-size:28upx;}
.grace-steps .step-content{width:100%; height:22upx; border-bottom:1px solid #F1F1F3;}
.grace-steps .step-title{line-height:50upx; height:50upx; background:#FFFFFF; width:auto; overflow:hidden; padding-right:8upx;}
.grace-steps .current .step-circle{background:#00B26A; color:#FFFFFF;}
.grace-steps .current .step-content{border-color:#00B26A;}
.grace-steps .current .step-title{color:#00B26A;}
</style>
\ No newline at end of file
examples/hello-uniapp/platforms/app-plus/tabbar-nvue/detail.vue
浏览文件 @ 176a8cf5
<template>
<view class="root">
<view class="page-body">
<view class="page-section-title">这是 nvue 页面跳转 vue 页面的演示，下面是页面跳转时传递过来的标题：</view>
<view class="page-section-title">{{data}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
data:""
}
},
onLoad(e){
if(e.data){
this.data = e.data;
}
}
}
<template>
<view class="root">
<view class="page-body">
<view class="page-section-title">这是 nvue 页面跳转 vue 页面的演示，下面是页面跳转时传递过来的标题：</view>
<view class="page-section-title">{{data}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
data:""
}
},
onLoad(e){
if(e.data){
this.data = e.data;
}
}
}
</script>
<style>
page{
display: flex;
min-height: 100%;
}
.root{
display: flex;
flex: 1;
flex-direction: column;
}
.page-body{
flex: 1;
display: flex;
box-sizing: border-box;
flex-direction: column;
padding-top: 30px;
}
<style>
page{
display: flex;
min-height: 100%;
}
.root{
display: flex;
flex: 1;
flex-direction: column;
}
.page-body{
flex: 1;
display: flex;
box-sizing: border-box;
flex-direction: column;
padding-top: 30px;
}
</style>
\ No newline at end of file
examples/hello-uniapp/platforms/app-plus/tabbar-nvue/tabbar-nvue.nvue
浏览文件 @ 176a8cf5
<template>
<div class="root">
<tabs class="tabs" @change="changeTab" :index="tabIndex">
<tab-bar class="tab-bar" scroll="true">
<div class="tab-bar-item" v-for="(tabBar, t) in tabBars" :key="t" :ref="tabBar.id + t">
<text class="tab-bar-title" :class="[tabIndex === t ? 'active' : '']">{{tabBar.name}}</text>
</div>
</tab-bar>
<tab-content class="item-tabcnt">
<list class="list" @loadmore="loadMore(index1)" loadmoreoffset="10" v-for="(tab,index1) in newsitems" :key="index1">
<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
<!-- <loading-indicator class="indicator"></loading-indicator> -->
<text class="refresh-text">{{refreshText}}</text>
</refresh>
<cell v-for="(newsitem,index2) in tab.data" :key="index2">
<media-list :data="newsitem" @close="close(index1,index2)"@click="goDetail(newsitem)"></media-list>
</cell>
<cell class="loadmore">
<text class="loadmore-text">{{tab.loadingText}}</text>
</cell>
</list>
</tab-content>
</tabs>
</div>
</template>
<script>
import tabContent from '@/components/tab-nvue/tabContent.nvue'
import tabBar from '@/components/tab-nvue/tabBar.nvue'
import tabs from '@/components/tab-nvue/tabs.nvue'
import mediaList from '@/components/tab-nvue/mediaList.nvue'
const dom = weex.requireModule('dom')
export default {
components: {
tabContent,
tabBar,
tabs,
mediaList
},
created() {
setTimeout(() => {
this.newsitems = this.randomfn();
},150)
},
data() {
return {
refreshing: false,
current_rotate:0,
refreshText:"下拉可以刷新",
tabIndex: 0,
newsitems: [],
data0:{
"datetime": "40分钟前",
"article_type": 0,
"title": "uni-app行业峰会频频亮相，开发者反响热烈!",
"source": "DCloud",
"comment_count": 639
},
data1:{
"datetime": "一天前",
"article_type": 1,
"title": "DCloud完成B2轮融资，uni-app震撼发布!",
"image_url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90",
"source": "DCloud",
"comment_count": 11395
},
data2:{
"datetime": "一天前",
"article_type": 2,
"title": "中国技术界小奇迹：HBuilder开发者突破200万",
"image_url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90",
"source": "DCloud",
"comment_count": 11395
},
data4:{
"datetime": "2小时前",
"article_type": 4,
"title": "uni-app 支持原生小程序自定义组件，更开放、更自由",
"image_url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90",
"source": "DCloud",
"comment_count": 69
},
data3:{
"article_type":3,
"image_list": [{
"url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90",
"width": 563,
"height": 316
}, {
"url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90",
"width": 641,
"height": 360
}, {
"url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90",
"width": 640,
"height": 360
}],
"datetime": "5分钟前",
"title": "uni-app 支持使用 npm 安装第三方包，生态更趋丰富",
"source": "DCloud",
"comment_count": 11
},
tabBars: [{
name: '关注',
id: 'guanzhu'
}, {
name: '推荐',
id: 'tuijian'
}, {
name: '体育',
id: 'tiyu'
}, {
name: '热点',
id: 'redian'
}, {
name: '财经',
id: 'caijing'
}, {
name: '娱乐',
id: 'yule'
}, {
name: '军事',
id: 'junshi'
}, {
name: '历史',
id: 'lishi'
}, {
name: '本地',
id: 'bendi'
}]
}
},
methods: {
goDetail(e){
uni.navigateTo({
url: './detail?data=' + e.title
})
},
onrefresh(event) {
uni.showToast({
title: "refresh",
icon:"none"
});
this.refreshText = "正在刷新...";
this.refreshing = true;
setTimeout(() => {
console.log("刷新结束")
this.refreshing = false
}, 2000)
},
onpullingdown(event) {
if(this.refreshing){
return;
}
if(Math.abs(event.pullingDistance) > Math.abs(event.viewHeight)){
this.refreshText = "释放立即刷新";
}else{
this.refreshText = "下拉可以刷新";
}
},
loadMore(e) {
setTimeout(() => {
this.addData(e);
}, 1000);
},
addData(e) {
console.log("加载更多...");
if (this.newsitems[e].data.length > 30) {
this.newsitems[e].loadingText = '没有更多了';
return;
}
for (let i = 1; i <= 10; i++) {
this.newsitems[e].data.push(this['data' + Math.floor(Math.random()*5)]);
}
},
close(index1,index2){
console.log(963)
uni.showModal({
content: '是否删除本条信息？',
success:(res) => {
console.log(123)
if (res.confirm) {
console.log("999")
this.newsitems[index1].data.splice(index2,1);
}
}
});
},
async changeTab(e) {
this.tabIndex = e.index;
const el = this.$refs[this.tabBars[e.index].id + e.index][0]
let elSize = await this.getElSize(el);
if (elSize.left + elSize.width > 750) {
let index = e.index - 4;
let newEl = this.$refs[this.tabBars[index].id + index][0]
dom.scrollToElement(newEl, {});
return;
}
if (elSize.left < 0) {
dom.scrollToElement(el, {});
}
},
getElSize(el) { //得到元素的size
return new Promise((res, rej) => {
const result = dom.getComponentRect(el, option => {
res(option.size);
})
})
},
randomfn() {
let ary = [];
for (let i = 0, length = this.tabBars.length; i < length; i++) {
let aryItem = {
loadingText: "加载更多...",
data: []
};
for (let j = 1; j <= 10; j++) {
aryItem.data.push(this['data' + Math.floor(Math.random()*5)]);
}
ary.push(aryItem);
}
return ary;
}
}
}
</script>
<style>
.root {
flex-direction: column;
}
.title {
height: 88px;
background-color: #F8F8F8;
justify-content: center;
}
.title-text {
font-size: 34px;
text-align: center;
}
.tabs {
flex: 1;
}
.tab-bar {
border-bottom-width: 1px;
border-color: #c8c7cc;
border-bottom-style: solid;
background-color: #fff;
height: 100px;
}
.tab-bar-item {
width: 150px;
height: 100px;
flex-direction: column;
align-items: center;
justify-content: center;
}
.tab-bar-title {
height: 100px;
line-height: 100px;
font-size: 30px;
color: #555;
}
.active {
color: #007AFF;
}
.tab-list {
width: 100%;
width: 600px;
height: 90px;
margin-left: 75px;
margin-top: 20px;
flex-direction: column;
justify-content: center;
border-width: 1px;
border-style: solid;
border-color: rgb(162, 217, 192);
background-color: rgba(162, 217, 192, 0.2);
}
.loadmore-text {
font-size: 30px;
text-align: center;
color: #999999;
}
.loadmore {
height: 70px;
flex-direction: column;
justify-content: center;
}
.refresh {
width: 750px;
height: 70px;
flex-direction: row;
align-items: center;
justify-content: center;
}
.refresh-text{
text-align: center;
font-size: 28px;
color: #999999;
}
<template>
<div>
<tabs @change="changeTab" :index="tabIndex">
<tab-bar>
<div class="tab-bar-item" v-for="(tabBar, t) in tabBars" :key="t" :ref="tabBar.id + t">
<text class="tab-bar-title" :class="[tabIndex === t ? 'active' : '']">{{tabBar.name}}</text>
</div>
</tab-bar>
<tab-content>
<list class="list" @loadmore="loadMore(index1)" loadmoreoffset="10" v-for="(tab,index1) in newsitems" :key="index1">
<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
<text class="refresh-text">{{refreshText}}</text>
</refresh>
<cell v-for="(newsitem,index2) in tab.data" :key="index2">
<media-list :data="newsitem" @close="close(index1,index2)"@click="goDetail(newsitem)"></media-list>
</cell>
<cell class="loadmore">
<text class="loadmore-text">{{tab.loadingText}}</text>
</cell>
</list>
</tab-content>
</tabs>
</div>
</template>
<script>
import tabContent from '@/components/tab-nvue/tabContent.nvue'
import tabBar from '@/components/tab-nvue/tabBar.nvue'
import tabs from '@/components/tab-nvue/tabs.nvue'
import mediaList from '@/components/tab-nvue/mediaList.nvue'
const dom = weex.requireModule('dom')
export default {
components: {
tabContent,
tabBar,
tabs,
mediaList
},
created() {
setTimeout(() => {
this.newsitems = this.randomfn();
},150)
},
data() {
return {
refreshing: false,
current_rotate:0,
refreshText:"下拉可以刷新",
tabIndex: 0,
newsitems: [],
data0:{
"datetime": "40分钟前",
"article_type": 0,
"title": "uni-app行业峰会频频亮相，开发者反响热烈!",
"source": "DCloud",
"comment_count": 639
},
data1:{
"datetime": "一天前",
"article_type": 1,
"title": "DCloud完成B2轮融资，uni-app震撼发布!",
"image_url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90",
"source": "DCloud",
"comment_count": 11395
},
data2:{
"datetime": "一天前",
"article_type": 2,
"title": "中国技术界小奇迹：HBuilder开发者突破200万",
"image_url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90",
"source": "DCloud",
"comment_count": 11395
},
data4:{
"datetime": "2小时前",
"article_type": 4,
"title": "uni-app 支持原生小程序自定义组件，更开放、更自由",
"image_url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90",
"source": "DCloud",
"comment_count": 69
},
data3:{
"article_type":3,
"image_list": [{
"url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90",
"width": 563,
"height": 316
}, {
"url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90",
"width": 641,
"height": 360
}, {
"url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90",
"width": 640,
"height": 360
}],
"datetime": "5分钟前",
"title": "uni-app 支持使用 npm 安装第三方包，生态更趋丰富",
"source": "DCloud",
"comment_count": 11
},
tabBars: [{
name: '关注',
id: 'guanzhu'
}, {
name: '推荐',
id: 'tuijian'
}, {
name: '体育',
id: 'tiyu'
}, {
name: '热点',
id: 'redian'
}, {
name: '财经',
id: 'caijing'
}, {
name: '娱乐',
id: 'yule'
}, {
name: '军事',
id: 'junshi'
}, {
name: '历史',
id: 'lishi'
}, {
name: '本地',
id: 'bendi'
}]
}
},
methods: {
goDetail(e){
uni.navigateTo({
url: './detail?data=' + e.title
})
},
onrefresh(event) {
uni.showToast({
title: "refresh",
icon:"none"
});
this.refreshText = "正在刷新...";
this.refreshing = true;
setTimeout(() => {
console.log("刷新结束")
this.refreshing = false
}, 2000)
},
onpullingdown(event) {
if(this.refreshing){
return;
}
if(Math.abs(event.pullingDistance) > Math.abs(event.viewHeight)){
this.refreshText = "释放立即刷新";
}else{
this.refreshText = "下拉可以刷新";
}
},
loadMore(e) {
setTimeout(() => {
this.addData(e);
}, 1000);
},
addData(e) {
console.log("加载更多...");
if (this.newsitems[e].data.length > 30) {
this.newsitems[e].loadingText = '没有更多了';
return;
}
for (let i = 1; i <= 10; i++) {
this.newsitems[e].data.push(this['data' + Math.floor(Math.random()*5)]);
}
},
close(index1,index2){
uni.showModal({
content: '是否删除本条信息？',
success:(res) => {
if (res.confirm) {
this.newsitems[index1].data.splice(index2,1);
}
}
})
},
async changeTab(e) {
this.tabIndex = e.index;
const el = this.$refs[this.tabBars[e.index].id + e.index][0]
let elSize = await this.getElSize(el);
if (elSize.left + elSize.width > 750) {
let index = e.index - 4;
let newEl = this.$refs[this.tabBars[index].id + index][0]
dom.scrollToElement(newEl, {});
return;
}
if (elSize.left < 0) {
dom.scrollToElement(el, {});
}
},
getElSize(el) { //得到元素的size
return new Promise((res, rej) => {
const result = dom.getComponentRect(el, option => {
res(option.size);
})
})
},
randomfn() {
let ary = [];
for (let i = 0, length = this.tabBars.length; i < length; i++) {
let aryItem = {
loadingText: "加载更多...",
data: []
};
for (let j = 1; j <= 10; j++) {
aryItem.data.push(this['data' + Math.floor(Math.random()*5)]);
}
ary.push(aryItem);
}
return ary;
}
}
}
</script>
<style>
.tab-bar-item {
width: 150px;
height: 100px;
flex-direction: column;
align-items: center;
justify-content: center;
}
.tab-bar-title {
height: 100px;
line-height: 100px;
font-size: 30px;
color: #555;
}
.active {
color: #007AFF;
}
.loadmore {
height: 70px;
width: 750px;
flex-direction: column;
justify-content: center;
}
.loadmore-text {
font-size: 30px;
text-align: center;
color: #999999;
}
.refresh {
width: 750px;
height: 70px;
flex-direction: row;
align-items: center;
justify-content: center;
}
.refresh-text{
text-align: center;
font-size: 28px;
color: #999999;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或