unity转微信小游戏：自定义好友排行榜显示UI
unity转微信小游戏好友排行榜参考
unity转微信小游戏好友排行榜参考下面链接文章
微信好友排行榜自定义显示样式
自定义显示样式需要修改open-data\render\tpls\friendRank.js里的代码
需要修改的代码如下
export default function anonymous(it) {
let out = '<view class="container" id="main"> <view class="rankList"> <scrollview class="list" scrollY="true"> ';
const arr1 = it.data;
if (arr1) {
let item;
let index = -1;
const l1 = arr1.length - 1;
while (index < l1) {
item = arr1[(index += 1)];
out += ` <view class="listItem"> <image src="open-data/render/image/rankBg.png" class="rankBg"></image>
<image class="rankAvatarBg" src="open-data/render/image/rankAvatar.png"></image>
<image class="rankAvatar" src="${
item.avatarUrl}"></image>
<view class="rankNameView">
<image class="rankNameBg" src="open-data/render/image/nameBg.png"></image>
<text class="rankName" value="${
item.nickname}"></text>
<text class="rankScoreTip" value="战力值:"></text>
<text class="rankScoreVal" value="${
item.score || 0}"></text> </view>
<view class="shareToBtn" data-isSelf="${
!!item.isSelf}" data-id="${
item.openid || ''}">
<image src="open-data/render/image/${
item.isSelf ? 'button3' : 'button2'}.png" class="shareBtnBg"></image>
<text class="shareText" value="${
item.isSelf ? '你自己' : '分享'}"></text> </view> </view> `;
}
}
out += ' </scrollview> </view></view>';
return out;
我们需要把没用的整条class删除，然后修改需要用到的class条目
常修改的 class=“rankScoreTip” value=“战力值:” 把 战力值 修改成自己的排行榜值如：关、攻击力等等
修改前是这样的样式
我做的修改是：
1、删除不需要的class条目
2、排行榜名次背景交替显示不同背景
3、前三名显示对应图标
4、第四名开始显示名次数字
5、自己显示单独的背景
代码如下
export default function anonymous(it) {
let out = '<view class="container" id="main"> <view class="rankList"> <scrollview class="list" scrollY="true"> ';
const arr1 = it.data;
if (arr1) {
let item;
let index = -1;
const l1 = arr1.length - 1;
while (index < l1) {
item = arr1[(index += 1)];
let bgImage;
if (item.isSelf) {
bgImage = 'rankBgSelf.png';
} else {
bgImage = (index + 1) % 2 === 0 ? 'rankBg2.png' : 'rankBg1.png';
}
//检查当前索引是否属于前三名
let rankDisplay;
if (index < 3) {
//前三名显示对应的图片
rankDisplay = `<image src="open-data/render/image/${
index+1}.png" class="rankIcon"></image>`;
} else {
//其他名次显示数字
rankDisplay = `<text class="rankNum" value="${
index+1}"></text>`;
}
out += ` <view class="listItem">
<image src="open-data/render/image/${
bgImage}" class="rankBg"></image>
<image class="rankAvatar" src="${
item.avatarUrl}"></image>
<view class="rankNameView">
<image class="rankNameBg" src="open-data/render/image/nameBg.png"></image>
<text class="rankName" value="${
item.nickname}"></text>${
rankDisplay}
<text class="rankScoreTip" value="关"></text>
<text class="rankScoreVal" value="${
item.score || 0}"></text> </view> </view> `;
}
注意：修改代码前先把图片资源放到open-data\render\image图片文件夹下；修改完样式代码后，还需要修改各个class对应图片或数据显示的大小、位置后整个排行榜才能正常显示；这两个地方如果有一个地方代码或参数有问题排行榜显示会出现问题
图片文件夹位置如图
微信好友排行榜自定义图标大小和位置
自定义图标大小和位置需要修改open-data\render\styles\friendRank.js里的代码
原代码例如排行榜名字代码如下
rankName: {
position: 'absolute',
top: (data.height / 2 / 3) * 0.14,
left: 0,
width: data.width * 0.35,
height: (data.height / 2 / 3) * 0.4,
textAlign: 'center',
lineHeight: (data.height / 2 / 3) * 0.4,
fontSize: data.width * 0.043,
textOverflow: 'ellipsis',
color: '#fff',
},
我们需要修改位置、字体大小fontSize、字体颜色color等等，修改起来比较麻烦需要在微信开发者工具里一边修改完一边编译查看效果
这里的rankName和上面 样式代码 里的rankName是对应的，样式代码里有什么，这个代码里就有对应的栏目可以修改，自己增加排行榜图标和标题时这里也需要加上对应的栏目
我修改完的样式代码里对应栏目的大小位置后最终效果如下
完整素材和代码链接如下（竖屏游戏再自己修改数值调整位置）
总结
所有操作都在微信开发者工具里进行
1、修改代码前先把图片资源放到open-data\render\image图片文件夹下
2、修改open-data\render\tpls\friendRank.js里的代码调整样式
3、修改open-data\render\styles\friendRank.js里的代码调整图标或标题的显示大小、位置
4、编译查看效果或再次修改