|
@@ -1,118 +1,119 @@
|
|
|
-<template>
|
|
|
- <view>
|
|
|
- <u-swipe-action :show="item.show" :index="index"
|
|
|
- v-for="(item, index) in list" :key="item.id"
|
|
|
- @click="click(index,item.id)" @open="open"
|
|
|
- :options="options"
|
|
|
- >
|
|
|
- <view class="item u-border-bottom" style="justify:center;align-items:center;display:-webkit-flex">
|
|
|
- <image mode="aspectFill" :src="item.images" />
|
|
|
- <!-- 此层wrap在此为必写的,否则可能会出现标题定位错误 -->
|
|
|
- <view class="title-wrap">
|
|
|
- <text>{{item.text}}</text>
|
|
|
- <text
|
|
|
- class="title u-line-2">{{ item.title }}</text>
|
|
|
- </view>
|
|
|
- <view style="color: #9a9a9f;margin-right: -5rpx;">
|
|
|
- 11:20
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </u-swipe-action>
|
|
|
- <view style="width: 50%;margin: 0 auto;height: 220rpx;align-items: center;position: absolute;
|
|
|
- top: 45%;
|
|
|
- left: 50%;
|
|
|
- transform:translate(-50%,-50%)">
|
|
|
- <u-image src="../../static/noNews.png" width="100%" height="200rpx"></u-image>
|
|
|
- <view style="text-align: center;">
|
|
|
- <text style="color: #C0C4CC;">暂无消息</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- list: [
|
|
|
- // {
|
|
|
- // id: 1,
|
|
|
- // text:'系统消息',
|
|
|
- // title: '长安回望绣成堆,山顶千门次第开,一骑红尘妃子笑,无人知是荔枝来',
|
|
|
- // images: 'https://cdn.uviewui.com/uview/common/logo.png',
|
|
|
- // show: false
|
|
|
- // },
|
|
|
- // {
|
|
|
- // id: 2,
|
|
|
- // text:'客服消息',
|
|
|
- // title: '新丰绿树起黄埃,数骑渔阳探使回,霓裳一曲千峰上,舞破中原始下来',
|
|
|
- // images: 'https://cdn.uviewui.com/uview/common/logo.png',
|
|
|
- // show: false
|
|
|
- // },
|
|
|
- // {
|
|
|
- // id: 3,
|
|
|
- // text:'广告消息',
|
|
|
- // title: '登临送目,正故国晚秋,天气初肃。千里澄江似练,翠峰如簇',
|
|
|
- // images: 'https://cdn.uviewui.com/uview/common/logo.png',
|
|
|
- // show: false,
|
|
|
- // }
|
|
|
- ],
|
|
|
- disabled: false,
|
|
|
- btnWidth: 180,
|
|
|
- show: false,
|
|
|
- options: [
|
|
|
- {
|
|
|
- text: '删除',
|
|
|
- style: {
|
|
|
- backgroundColor: '#f30000'
|
|
|
- }
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- click(index, index1) {
|
|
|
- this.list.splice(index, 1);
|
|
|
- },
|
|
|
- // 如果打开一个的时候,不需要关闭其他,则无需实现本方法
|
|
|
- open(index) {
|
|
|
- // 先将正在被操作的swipeAction标记为打开状态,否则由于props的特性限制,
|
|
|
- // 原本为'false',再次设置为'false'会无效
|
|
|
- this.list[index].show = true;
|
|
|
- this.list.map((val, idx) => {
|
|
|
- if(index != idx) this.list[idx].show = false;
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- .item {
|
|
|
- display: flex;
|
|
|
- padding: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- image {
|
|
|
- width: 120rpx;
|
|
|
- flex: 0 0 120rpx;
|
|
|
- height: 120rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
- border-radius: 12rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- text-align: left;
|
|
|
- font-size: 28rpx;
|
|
|
- width: 90%;
|
|
|
- color: $u-content-color;
|
|
|
- margin-top: 20rpx;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;display: -webkit-box;
|
|
|
- -webkit-line-clamp: 1;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- }
|
|
|
- .u-border-bottom:active{
|
|
|
- background-color: #f0f0f0;
|
|
|
- }
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-swipe-action :show="item.show" :index="index" v-for="(item, index) in list" :key="item.id"
|
|
|
+ @click="click(index,item.id)" @open="open" :options="options">
|
|
|
+ <view class="item u-border-bottom" style="justify:center;align-items:center;display:-webkit-flex">
|
|
|
+ <image mode="aspectFill" :src="item.images" />
|
|
|
+ <!-- 此层wrap在此为必写的,否则可能会出现标题定位错误 -->
|
|
|
+ <view class="title-wrap">
|
|
|
+ <text>{{item.text}}</text>
|
|
|
+ <text class="title u-line-2">{{ item.title }}</text>
|
|
|
+ </view>
|
|
|
+ <view style="color: #9a9a9f;margin-right: -5rpx;">
|
|
|
+ 11:20
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-swipe-action>
|
|
|
+ <view style="
|
|
|
+ width: 50%;
|
|
|
+ margin: 0 auto;
|
|
|
+ height: 220rpx;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 45%;
|
|
|
+ left: 50%;
|
|
|
+ transform:translate(-50%,-50%)">
|
|
|
+ <u-image src="../../static/noNews.png" width="100%" height="200rpx"></u-image>
|
|
|
+ <view style="text-align: center;">
|
|
|
+ <text style="color: #C0C4CC;">暂无消息</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: [
|
|
|
+ // {
|
|
|
+ // id: 1,
|
|
|
+ // text:'系统消息',
|
|
|
+ // title: '长安回望绣成堆,山顶千门次第开,一骑红尘妃子笑,无人知是荔枝来',
|
|
|
+ // images: 'https://cdn.uviewui.com/uview/common/logo.png',
|
|
|
+ // show: false
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // id: 2,
|
|
|
+ // text:'客服消息',
|
|
|
+ // title: '新丰绿树起黄埃,数骑渔阳探使回,霓裳一曲千峰上,舞破中原始下来',
|
|
|
+ // images: 'https://cdn.uviewui.com/uview/common/logo.png',
|
|
|
+ // show: false
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // id: 3,
|
|
|
+ // text:'广告消息',
|
|
|
+ // title: '登临送目,正故国晚秋,天气初肃。千里澄江似练,翠峰如簇',
|
|
|
+ // images: 'https://cdn.uviewui.com/uview/common/logo.png',
|
|
|
+ // show: false,
|
|
|
+ // }
|
|
|
+ ],
|
|
|
+ disabled: false,
|
|
|
+ btnWidth: 180,
|
|
|
+ show: false,
|
|
|
+ options: [{
|
|
|
+ text: '删除',
|
|
|
+ style: {
|
|
|
+ backgroundColor: '#f30000'
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ click(index, index1) {
|
|
|
+ this.list.splice(index, 1);
|
|
|
+ },
|
|
|
+ // 如果打开一个的时候,不需要关闭其他,则无需实现本方法
|
|
|
+ open(index) {
|
|
|
+ // 先将正在被操作的swipeAction标记为打开状态,否则由于props的特性限制,
|
|
|
+ // 原本为'false',再次设置为'false'会无效
|
|
|
+ this.list[index].show = true;
|
|
|
+ this.list.map((val, idx) => {
|
|
|
+ if (index != idx) this.list[idx].show = false;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ padding: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 120rpx;
|
|
|
+ flex: 0 0 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ text-align: left;
|
|
|
+ font-size: 28rpx;
|
|
|
+ width: 90%;
|
|
|
+ color: $u-content-color;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-border-bottom:active {
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ }
|
|
|
+</style>
|