Las mismas tres partes, 1, interfaz (estructura)
<view class="info">
<view class="header">
<scroll-view
scroll-x
enable-flex
class="nav_menu"
>
<view class="item" wx:for="{
{videoGroupList}}" wx:key="{
{item.id}}"
bindtap="handlePlay"
>
<view class="container"
id = "{
{item.id}}"
class="{
{vid===item.id?'active':''}}"
>
{
{item.name}}
</view>
</view>
</scroll-view>
</view>
<!-- <view class="logo">
<image src = "/static/images/nvsheng.jpg"></image>
<view class="show">
<text>1 /</text>
<text> 2</text>
</view>
</view> -->
<!-- <view class="movediv"
bindtouchstart="movetouchstart"
bindtouchmove="movetouchmove"
bindtouchend="movetouchend"
style="transform :{
{movestyle}}; transition:{
{movetime}}"
>
</view>
<view class="personal">
<image src="{
{avatar}}" bindtap="login"></image>
<text>{
{desc}}</text>
</view> -->
</view>
2. Estilo:
.nav_menu {
display: flex;
flex-direction: row;
width:100%;
/* background:#CCC; */
white-space: nowrap;
height: 62rpx;
}
.nav_menu .item{
height:60rpx;
line-height: 60rpx;
padding: 0rpx 10rpx;
box-sizing: border-box;
}
.active {
border-bottom: 2rpx solid #f00;
}3 Comportamiento: (comportamiento, mantenimiento del estado)
// pages/info/info.
Page({
/**
* 页面的初始数据
*/
data: {
videoGroupList':[],
'vid':0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 获取视频的分类列表
wx.request({
url: 'http://localhost:3000/video/group/list',
success:(res)=>{
console.log(res)
let videoGroupLit = res.data.data;
videoGroupLit.splice(0,99);
let videoId = videoGroupLit[0].id;
this.setData({
videoGroupList: videoGroupLit,
vid: videoId
})
}
})
}
})El punto es CSS
Este efecto se puede lograr:
La rutina básica es obtener los datos del fondo y luego soltarlos y actualizarlos dinámicamente a través del mecanismo de enlace de datos de WeChat.
Si hay un estado específico, también puede vivir en el estado de datos, siempre que el estado cambie, la vista cambiará en consecuencia
¡Lo más importante es mantener la gestión del estado!