小程序
小游戏
企业微信
微信支付
扫描小程序码分享
比如点击向上按钮,将视频所在的整个view包括其内容移动到单图的view上面,求方法
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
可以通过数组索引动态改变位置啊
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
viewList:[
{
view_type:0,
view_name:'单图'
},
view_type:1,
view_name:'视频'
view_type:2,
view_name:'文字'
}
]
up(e){
let type = e.currentTarget.dataset.type;
let index = e.currentTarget.dataset.index;
let curItem = this.data.viewList[index];
let frontItem = this.data.viewList[index - 1];
let index_front = index - 1;
let len = this.data.viewList.length;
for(let i=0;i<len;i++){
if(index==0){
wx.showToast({
title: '已在顶层',
icon:'none'
})
}else{
this.setData({
[`viewList[${index}]`]: frontItem,
[`viewList[${index_front}]`]: curItem,
down(e){
<view wx:for="{{viewList}}" wx:key="index">
<view class="content">
<view class="top">
<text>{{item.view_name}}</text>
<view class="imgs">
<image src="../../static/images/icon_up.png" style="width:60rpx;height:60rpx"
bindtap="up" data-type="{{item.view_type}}" data-index="{{index}}"></image>
<image src="../../static/images/icon_down.png" style="width:60rpx;height:60rpx"
bindtap="down" data-type="{{item.view_type}}" data-index="{{index}}"></image>
<image src="../../static/images/icon_delete.png" style="width:60rpx;height:60rpx"
bindtap="delete" data-type="{{item.view_type}}" data-index="{{index}}"></image>
</view>
<view class="middle">
<view class="middle-img" wx:if="{{item.view_type==0}}">
<text>点击上传</text>
<view class="middle-video" wx:if="{{item.view_type==1}}">
<video></video>
<view class="middle-text" wx:if="{{item.view_type==2}}">
<textarea placeholder="请输入文字内容"></textarea>
.content{
width: 90%;
padding: 5%;
border-bottom: 1rpx solid #dedede;
.top{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.imgs{
.imgs image{
width: 40rpx;
height: 40rpx;
margin:0 10rpx;
.middle{
.middle .middle-img{
width: 150rpx;
height: 150rpx;
justify-content: center;
background-color: #dedede;
font-size: 24rpx;
.middle-video video{
margin-top: 20rpx;
height: 300rpx;
三个放一个数组里标签渲染然后点击改变元素顺序?
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
可以通过数组索引动态改变位置啊
viewList:[
{
view_type:0,
view_name:'单图'
},
{
view_type:1,
view_name:'视频'
},
{
view_type:2,
view_name:'文字'
}
]
up(e){
let type = e.currentTarget.dataset.type;
let index = e.currentTarget.dataset.index;
let curItem = this.data.viewList[index];
let frontItem = this.data.viewList[index - 1];
let index_front = index - 1;
let len = this.data.viewList.length;
for(let i=0;i<len;i++){
if(index==0){
wx.showToast({
title: '已在顶层',
icon:'none'
})
}else{
this.setData({
[`viewList[${index}]`]: frontItem,
[`viewList[${index_front}]`]: curItem,
})
}
}
},
down(e){
let type = e.currentTarget.dataset.type;
<view wx:for="{{viewList}}" wx:key="index">
<view class="content">
<view class="top">
<text>{{item.view_name}}</text>
<view class="imgs">
<image src="../../static/images/icon_up.png" style="width:60rpx;height:60rpx"
bindtap="up" data-type="{{item.view_type}}" data-index="{{index}}"></image>
<image src="../../static/images/icon_down.png" style="width:60rpx;height:60rpx"
bindtap="down" data-type="{{item.view_type}}" data-index="{{index}}"></image>
<image src="../../static/images/icon_delete.png" style="width:60rpx;height:60rpx"
bindtap="delete" data-type="{{item.view_type}}" data-index="{{index}}"></image>
</view>
</view>
<view class="middle">
<view class="middle-img" wx:if="{{item.view_type==0}}">
<text>点击上传</text>
</view>
<view class="middle-video" wx:if="{{item.view_type==1}}">
<video></video>
</view>
<view class="middle-text" wx:if="{{item.view_type==2}}">
<textarea placeholder="请输入文字内容"></textarea>
</view>
</view>
</view>
</view>
.content{
width: 90%;
padding: 5%;
border-bottom: 1rpx solid #dedede;
}
.top{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.imgs{
display: flex;
flex-direction: row;
align-items: center;
}
.imgs image{
width: 40rpx;
height: 40rpx;
margin:0 10rpx;
}
.middle{
width: 100%;
}
.middle .middle-img{
width: 150rpx;
height: 150rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #dedede;
font-size: 24rpx;
}
.middle-video video{
margin-top: 20rpx;
width: 100%;
height: 300rpx;
}
三个放一个数组里标签渲染然后点击改变元素顺序?